css Animation(transform, transition, translate) 비슷하잖아..

Key.

animation > @keyframes > transition = transform > translate

animation이 있어야 @keyframes를 사용할 수 있고,
@keyframes안에 transition과 transform에 대한 다양한 효과들을 설정할 수 있다.
translate는 단순 transform method 중 하나이고 위치 이동을 한다.

@keyframes는 animation이 실행되는 동안 어떤 타이밍에 어떤 효과를 줄지 더 디테일하게 설정이 가능하게 하고 좀 더 자연스러운 애니메이션을 하게 해 주며, 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)

 }

}