CSS 애니메이션

애니메이션 순서

animation-name
예: slideIn, fade, bounce
animation-duration
예: 2s, 500ms
animation-timing-function (애니메이션 속도 곡선)
예: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(...), steps(...)
animation-delay
예: 1s, 300ms
animation-iteration-count (반복)
예: 1, 2, 5, infinite
animation-direction (애니메이션의 재생 방향)
예:  normal, reverse, alternate, alternate-reverse
animation-fill-mode
예:  none, forwards, backwards, both
animation-play-state
예:  running, paused

 

예시)

element {
  animation: slideIn 2s ease-in 1s 2 alternate forwards running;
}

애니메이션 하위 속성 설명

animation-timing-function (애니메이션 속도 곡선)

• linear
  시작부터 끝까지 일정. 그래프로 표현하면 직선.
• ease
  애니메이션이 천천히 시작하고, 중간에 속도가 빨라지다가 마지막에 다시 천천히 끝남.
  일반적으로 부드러운 애니메이션 효과를 원할 때 사용.
• ease-in
  천천히 시작해 중간과 끝 부분에 가속.
  
• ease-out
  빠르게 시작해 끝나는 부분에서 감속.
  
• ease-in-out
  시작과 끝은 천천히 진행, 중간 부분은 빠르게 진행.
• cubic-bezier(p1x, p1y, p2x, p2y)
  베지어 곡선을 사용하여 애니메이션의 속도 곡선을 정의.
  p1x, p1y 및 p2x, p2y는 곡선의 제어점을 나타냄. 이를 통해 매우 맞춤화된 속도 곡선을 생성할 수 있음.
  
• steps(int, start | end)
  애니메이션을 지정된 단계 수로 나눔.
  int는 애니메이션의 단계 수를 나타내며, start 또는 end는 단계 변경이 시작부터인지 끝부터인지를 나타냄.
  ex) steps(4, start)  =>  애니메이션을 4단계로 나누며, 각 단계는 애니메이션의 시작 부분에서 발생.

animation-direction (애니메이션의 재생 방향)

• normal (기본 값)
  애니메이션이 시작에서 끝까지 정방향으로 재생
• reverse
  애니메이션이 끝에서 시작까지 역방향으로 재생 (애니메이션의 순서가 반대로 진행됨)
• alternate
  애니메이션이 첫 번째 반복에서는 정방향으로 재생되고, 다음 반복에서는 역방향으로 재생됨. 
  (이 패턴은 애니메이션이 끝날 때까지 계속됨. 이를 통해 애니메이션을 앞뒤로 반복 재생할 수 있음.)
• alternate-reverse
  alternate와 동일하지만, 첫 번째 반복이 역방향으로 시작됨. (첫 번째 반복에서는 역방향으로 재생되고, 다음 반복에서는 정방향으로 재생됨.)

animation-fill-mode (애니메이션의 시작 전과 종료 후에 어떻게 스타일링되어야 하는지를 결정)

• none (기본 값)
  애니메이션이 종료되면 원래의 스타일로 돌아감
• forwards
  애니메이션 종료 후에 대상 요소는 애니메이션의 마지막 키 프레임의 스타일 값을 유지.
• backwards
  애니메이션 시작 전에 대상 요소에 애니메이션의 첫 번째 키 프레임의 스타일 값이 적용됨.
  보통 animation-delay를 설정할 때 사용 (animation-delay가 지정되어 있으면 해당 지연 시간 동안 첫 번째 키 프레임의 스타일이 적용됨.)
• both
  forwards와 backwards의 조합입니다. 애니메이션 시작 전에 첫 번째 키 프레임의 스타일이 적용되고, 애니메이션 종료 후에 마지막 키 프레임의 스타일이 유지.

animation-play-state

주로 사용자 상호작용이나 다른 조건에 따라 애니메이션을 일시적으로 중지하거나 다시 시작하는 데 사용

• running (기본 값)
  애니메이션이 정상적으로 실행됨. 만약 애니메이션이 일시 중지된 상태에서 running 값을 받게 되면, 애니메이션은 일시 중지된 지점부터 다시 시작됨.
• paused
  애니메이션이 일시 중지됨. (애니메이션을 다시 시작하려면 running 값을 적용해야 함.)
  이 상태에서 요소의 스타일은 마지막으로 적용된 키 프레임의 값에 고정됨

transition순서

transition-property (애니메이션 효과를 적용할 속성)
예: width, height, opacity, transform... (모든 변경 가능한 속성에 대해 효과 적용)
transition-duration
예: 2s, 500ms
transition-timing-function (애니메이션 속도 곡선)
예: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(...), steps(...)
transition-delay
예: 1s, 300ms

element {
  transform: translate(2px, -2px);
  transition: transform 2s ease-in 1s;
}