간단한 애니메이션 효과를 구현할 때는 최고의 선택 중 하나이다.

Keyframes

애니메이션의 초기 상태, 중간 상태, 목표 상태를 정의할 수 있다.

@keyframes bgChanges {
  0% {
    background-color: blue;
  }
  100% {
    background-color: red;
  }
}

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

위 두개의 코드는 동일하다.

@keyframes bgChanges {
  0% {
    background-color: blue;
  }
  50% {
    background-color: yellow;
  }
  67% {
    background-color: orange;
  }
  100% {
    background-color: red;
  }
}

이렇게 중간의 상태를 지정할 수도 있다.

animation-name

이 애니메이션의 중간 상태를 지정. 중간 상태는 @keyframes 규칙을 이용하여 기술.

animation-name: bgChanges

animation-duration, delay, timing-function

transition과 같이, 각각 지속시간, 실행 전 지연시간, 속도 함수를 정의한다.

animation-direction

애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정

animation-direction: normal;
animation-direction: alternate; //순방향으로 애니메이션을 시작해 역방향과 순방향으로 번갈아 애니메이션을 재생
animation-direction: reverse;
animation-direction: alternate-reverse; 역방향으로 애니메이션을 시작해 순방향과 역방향으로 번갈아 애니메이션을 재생

*애니메이션이 역방향으로 재생될 때는 animation-timing-function 속성과 관련된 효과도 반대로 적용된다.

animation-iteration-count

애니메이션이 몇 번 반복될지 지정

animation-iteration-count: infinite

animation-play-state

애니메이션을 멈추거나 다시 시작할 수 있다.

animation-play-state: paused
animation-play-state: running

animation-fill-mode

애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정

animation-fill-mode: none;
animation-fill-mode: forward; //애니메이션이 끝난 후의 마지막 상태가 유지, 얘를 제일 많이 쓴다.
animation-fill-mode: backward; //애니메이션이 시작되기 전의 첫 번째 상태가 적용, 애니메이션이 끝나면 원래 상태로 돌아온다.
animation-fill-mode: both; //애니메이션의 시작 전과 종료 후 모두 @keyframes에 정의된 스타일을 유지

transition과의 차이

transition 속성은 요소의 상태가 바뀌어야 애니메이션 실행.

animation 속성은 요소의 상태 변화와 상관 없이 애니메이션을 실행, 또한 @keyframes 속성으로 프레임을 추가할 수 있다.