[CSS] Transform, Transition, Animation에 대해 알아보자

1. Transform

 

transform은 어떤 요소에 대해  회전, 크기 변경 등의 동작을 하도록 하는 CSS 이벤트이다.

 

종류는 rotate(회전), scale(크기), skew(x축,y축 각도만큼 비틂), translate(좌표 변경)이 있다.

 

1. rotate(x)

인자로 회전할 각도를 주면 된다. deg라는 단위를 사용하자.

See the Pen Untitled by PARKMINHO (@pmhxhsj) on CodePen.

 

2. scale(width,height)

인자를 두 개 받을 수 있다. 각각 width, height를 의미한다.

1이 원래 크기이며, 1 초과일수록 본래의 크기보다 커지며, 미만이면 작아진다.

See the Pen Untitled by PARKMINHO (@pmhxhsj) on CodePen.

 

3. skew(x축, y축)

인자를 두 개 받을 수 있으며, x축, y축을 의미하며, 입력한 만큼 비틀어진다.

See the Pen Untitled by PARKMINHO (@pmhxhsj) on CodePen.

 

4. translate(가로, 세로)

인자를 두 개 받을 수 있으며, 가로, 세로를 의미하며, 원래 위치에서 입력한 값만큼 이동한다.

See the Pen Untitled by PARKMINHO (@pmhxhsj) on CodePen.

 

2. Transition

바로 이벤트가 나타나는 게 아닌, 마우스로 클릭했을 때, 마우스를 올려놨을 때 등

어떤 요소에 이벤트가 동작하면 실행되는 이벤트이다.

 

Transition는 아래와 같이 작성한다.

.box {
  transition-property: width;
  /* 효과를 적용하고자 하는 css속성 */
  transition-duration: 2s;
  /* 효과가 나타나는데 걸리는 시간 */
  transition-timing-function: linear;
  /* 효과의 속도, linear는 일정한 속도이며 주로 이걸 사용한다.*/
  transition-delay: 1s;
  /* 특정 조건을 걸 수 있으며, 그에 따라 발동된다. 1s는 1초 후 발동된다. */
}

Shorthand 문법으로 아래와 같이  한 번에 나열할 수도 있다.

위 코드와 아래 코드는 동일한 결과를 보여준다.

.box {
  transition: width 2s linear 1s;
}

마우스를 올리면 박스의 width가 점점 길어지는 걸 만들어보자!

위에 말했다시피 특정 이벤트가 있을 때 동작하므로 hover을 등록해줬다.

🔥 또한, delay는 필요할 때만 사용하면 된다! linear는 사용해줘야 동일한 속도로 일정하게 동작하니 사용해주자.

See the Pen Untitled by PARKMINHO (@pmhxhsj) on CodePen.

 

3. Animation

특정 이벤트 없이 창이 열렸을 때 나오는 animation 느낌이라 생각하면 편하다.

animation의 기본적인 동작을 확인하고, animation-direction의 각각 속성에 따라 결과가 어떻게 동작하는지 확인하자.

 

@keyframes는 from과 to 인자를 가지며, from => to로 동작한다고 이해하면 편하다.

아래의 chageColor와 같이 

animation-name과 @keyframes animation name이 일치해야 동작한다.

.box {

    animation-name: changeColor;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    /* transition의 특성과 같다. */
    
    animation-iteration-count: infinite;
    /* animation 지속 횟수를 지정한다. infinite는 무한이다. */
    animation-direction: alternate;
    /* alternate = from => to => from
       normal = from => to, form => to
       reverse: to => from, to => from
    */
}

@keyframes changeColor {
    from {
       background-color: blue;
    }
    to {
       background-color: red;
    }
}

당연히 animation도 Shorthand로 작성할 수 있다.

.box {
	animation: changeColor 3s linear infinite alternate;
}

@keyframes changeColor {
    from {
       background-color: blue;
    }
    to {
       background-color: red;
    }
}

간단하게 확인해보면 아래와 같이 동작한다.

See the Pen Untitled by PARKMINHO (@pmhxhsj) on CodePen.

 

alternate, normal, reverse 동작 차이는 해당 codepen으로 시각적으로 확인해보자.

가장 자연스럽게 동작하는 것은 alternate이다.

See the Pen Untitled by PARKMINHO (@pmhxhsj) on CodePen.

 

4. Transform과 Animation을 같이 사용해보자.

@keyframes from, to인자에 transform을 사용하면 된다.

 

4-1. 오뚝이 만들기

See the Pen Untitled by PARKMINHO (@pmhxhsj) on CodePen.

@keyframes rotation {
  from {
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(30deg);
  }
}

@keyframes에 transform을 적용해 만들 수 있다!

 

5. prefix

css의 어떠한 기능이 특정 브라우저에서 동작하지 않을 수 있으므로 접두사(prefix)를 통해 해당 브라우저에 기능에 대해 설명하며 

동작될 수 있도록 하는 것이다.

 

아래와 같이 4종류의 prefix를 기억하자.

.box {
  -webkit-transform: scale(2); /* 크롬, 사파리 */
  -moz-transform: scale(2); /* 파이어폭스 */
  -ms-transform: scale(2); /* 익스플로러 9.0 이상 */
  -o-transform: scale(2); /* 오페라 */
}

그리고 위의 오뚝이 예시에 webkit을 적용해보자.

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 20% 20% 50% 50%; 
  
  -webkit-animation: rotation 1s linear infinite alternate;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(-30deg);
  }
  to {
    -webkit-transform: rotate(30deg);
  }
}

animation, keyframes, transform 모두에 -webkit-을 붙여야 적용된 것이다. 만약 하나라도 빠뜨리면 어떠한 요소에 대한 

크로스 브라우징이 이루어지지 않을 수 있다.

 

 

이번 포스팅에서 transform, transition, animation에 대해 알아봤다. 

다 외울 필요는 없고 특정 기능이 필요할 때 찾아서 사용할 수 있을 정도의 개념만 학습하면 될 것 같다!