css animation 총정리 (transition, transform, translate, animation, @keyframes)

이름과 효과가 비슷비슷해서 사용할 때마다 헷갈리고 막막해서 '나' 그리고 나와 같은 사람들을 위해 총정리해보았습니다.

 

animation ⊃ @keyframes ⊃ transition = transform ⊃ translate

animation이 있어야 @keyframes를 사용할 수 있고, @keyframes안에 transition과 transform에 대한 다양한 효과들을 디테일하게 설정할 수 있으며, translate는 단순 transform method 중 하나로 x축, y축에 대한 이동을 나타내는 것뿐입니다.

 

(animation은 전체 효과들을 어떻게 사용할지, @keyframes는 animatino이 실행되는 동안 어떤 타이밍에 어떤 효과를 줄지 더 디테일하게 설정이 가능하게 하고 좀 더 자연스러운 애니메이션을 하게 해 주며, transition은 일부 효과와 animation의 미니 버전(?) 같은 것이고, translate은 transform에 속한 method이며 transform은 오로지 변형이 되는 것에 관련된 것이다. )

 

transition : 전환 효과

1. transition : 전환 효과 / width, height, color, background-color, font-size, font etc..

2. transition-delay : 재생시간

3. transition-duration : 시작 전에 지연시간

4. transition-property : 요소에 추가할 전환 효과 설정

5. transition-timing-function: 전환 효과의 시간당 속도

 

transform : 변형 효과

 해당 요소 모양, 크기, 위치, 회전, 변형, 그리고 모두를 동시에 변형할 수 있다. 기준은 browser의 좌측 상단

1. transform : 요소에 2D, 3D transform을 적용

2. transform-origin : 요소에 transform을 적용하는 변환 중심을 설정

3. transform-style : 요소에 transform을 적용할 때, 그 transform이 자식 child에게도 적용될 것인지 설정

4. perspective : 3D 요소에 원근감을 표현할 때, 사용할 픽셀 수를 설정함. / 입체적으로 보이는 3D 변형에 관련된 method는 원근감을 표현할 기준을 명시해야 함. 

5. perspective-origin : 3D 요소에 원근감을 표현할 때 사용할 기준 축을 설정

6. backface-visibility : 요소의 앞면만 표현할지, 앞뒤 모두 표현할지 설정.

 

 # 2D transform method

1. translate( x축, y축 ) : x축, y축 거리만큼 이동,

2. rotate( turn | deg ) : 주어진 각도만큼 시계 or반시계 방향으로 회전,

               양수> 시계방향/음수> 반시계 방향  ex) 1 turn, 30 deg로 작성 가능

3. scale() : 주어진 배율만큼 늘리거나 줄어듦, 1 < x이면 확대, 0 <x <1이면 축소

   scaleX(), scaleY() : 해당 요소의 x축 크기를 주어진 배율만큼 확대, 축소 y도 마찬가지.

4. skew( x축, y축 ) : x축, y축으로 기울임. 

   skewX() : +이면 x의 양의 축으로 기울어지고, -면 x의 음의 축으로 기울어짐.

   skewY() :  +이면 y의 양의 축으로 기울어지고, -면 y의 음의 축으로 기울어짐.

5. matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

     : 6개의 매개변수로, 모든 2D 변형 method를 한 번에 설정.

6. transform-origin : 요소에 transform을 적용하는 변환을 중심으로 적용. 

 

 # 3D transform method : 모양, 크기, 위치, 회전, 변형 등을 입체적으로 변형시킴.

1. rotate3d() : 2D와 같지만, 입체적으로 회전하므로, x축, y축을 기준으로 원통형 형식으로 회전한다고 생각하면 됨. 축을 기준으로 +면 시계방향, -면 반시계 방향으로 회전.

   rotate3 dX(), rotate3 dY(), rotate3 dZ() 각각 설정할 수 있음. 추가로, rotateZ()의 경우에는 Z 축이 나는 향해있는 축이 양수 방향이므로, 그것을 중심으로 원통형으로 회전한다 하면 2D처럼 회전하는 것처럼 보일 수 있음.

2. translate3 d(x축, y축, z 축) : 해당 거리만큼 양/음의 방향으로 이동한다. 특히, Z축의 경우, 기준선이 나를 향해 있으므로, +의 경우 더 가까이 있어 보이고(확대한 것처럼) -의 경우 더 멀리 있는 것처럼(축소된 것처럼) 보인다. / 원근감 표현

3. scale3 d() :

4. matrix3 d() :

5. perspective() : 입체적으로 보이는 3D 변형에 관련된 method는 원근감을 표현할 기준을 명시해야 함. 

 

aniamtion / @keyframes / transition / transform 사용방법

.div-name {

    animation: 이름 | 시작지연시간 | 재생속도 | 재생시간 | 반복횟수 | 진행방향

 }

@keyframes animation이름 {

   from {

     color: blue;

     transform: rotate(1 turn);

 }

   to {

     color: yellow;

     transform: translateX(30px)

 }

}