애니메이션 기초

animation-name

animation-duration

@keyframes

1. 애니메이션이 어떤 동작을 해야 하는지 정해준다. from과 to를 통해 애니메이션이 시작될 때 요소의 상태와 끝날 때의 요소의 상태를 정해준다.

animation-iteration-count

1. infinite
   1. 같은 애니메이션을 무한히 반복하고 싶을 때 사용한다.

animation-direction

1. alternate
   1. 지정된 애니메이션을 반대 방향으로도 한 번 더 반복해 정방향 → 역방향을 모두 나타내고 싶을 때 사용한다.
2. reversez
   1. 지정된 애니메이션을 반대 방향으로 실행시킨다.

animation-delay

1. animation-timing-function

   1. 가속도라고 생각하면 된다.

   2. linear

      1. 말 그대로 그냥 애니메이션의 가속도가 직선이다.

   3. 개발자 도구에서 내 입맛에 맞는 타이밍 함수를 직접 커스텀할 수 있다.

      

animation-fill-mode

1. forwards
   1. 지정된 애니메이션이 끝난 그 자리에 그대로 요소를 위치시키고 싶을 때 사용한다. 이 속성을 사용하지 않으면 애니메이션이 끝났을 때, 끝난 위치랑 상관없이 애니메이션이 시작했던 자리로 돌아오게 된다.

트랜지션

요소의 변화가 서서히 일어나도록 하고 싶을 때 사용하는 속성이 트랜지션이다.