CSS animation

transition과 차이점은 animation은 유저의 액션이 없어도 효과를 적용시킬 수 있으며 하나의 스타일만 적용시킬 수 있는 transition과 달리 여러개의 스타일을 순서대로 적용시킬 수 있다.

animation

축약하여 사용 가능하며 transition과 다른점은 name을 지정하여 @keyframes을 통해 효과를 넣는다.

/* sample애니메이션을 1초동안 무한으로 재생 */
p {animation: sample 1s infinite}

@keyframes sample {
  /* from, to로 적용 */
  from {top: 0;}
  to {top: 100px}
  
  /* %로 적용 (2개 이상일 경우) */
  0% {top: 0;}
  50% {top: 50px;}
  100% {top: 100px}
}

shorthand

순서는 상관없으나 1s 2s가 있다면 앞쪽에 있는 1을 duration, 뒤쪽에 있는 2s를 delay로 인식한다.

animation-name

요소에 적용할 애니메이션 이름을 설정한다.
무조건 설정해야 하며 _, -, a-z, 0-9로만 이름을 만들 수 있다.

animation-name: sample

@keyframes sample {}

animation-duration

애니메이션이 한 사이클을 완료하는데 걸리는 시간을 설정한다.
단위는 s, ms

animation-duration: 5s

animation-delay

애니메이션이 시작할 시점을 설정한다.
시작 즉시, 잠시 후, 애니메이션이 일부 진행된 시점부터

애니메이션이 일부 진행된 시점부터는 -값을 사용한다. ex) -1s

/* 애니메이션이 즉시 시작되지만 애니메이션 주기의 5초가 지난 시점부터 시작 */
animation-delay: -5s

animation-timing-function

애니메이션의 속도를 설정한다. (transition편 참조)

animation-timing-function: linear;

animation-iteration-count

애니메이션의 반복 횟수를 설정한다. 기본값은 1

/* 2번만 재생 후 정지 */
animation-iteration-count: 2;

/* 무한으로 재생 */
animation-iteration-count: infinite;

animation-direction

애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 설정한다. 기본값 normal

/* 역방향으로 재생 */
animation-direction: reverse;

/* 주기마다 방향을 뒤집음. 첫번째 반복은 정방향 */
animation-direction: alternate;

/* 주기마다 방향을 뒤집음. 첫번째 반복은 역방향 */
animation-direction: alternate-reverse;

animation-play-state

애니메이션이 실행 중인지 또는 일시 중지되었는지를 설정한다.
기본값 running

hover같이 액션이 발생했을때 사용할 수도 있음

/* 애니메이션이 정지된 부분부터 다시 시작 */
animation-play-state: running;

/* 애니메이션이 일시 정지 */
animation-play-state: paused;

animation-fill-mode

애니메이션의 실행 전과 후의 대상에 스타일을 설정한다.
기본값 none

/* animation이 실행되지 않을 때 대상에 keyframes스타일을 적용하지 않는다. */
animation-fill-mode: none;

/* animation이 끝나고 keyframes에 적용된 스타일을 유지한다. */
animation-fill-mode: forwards;

/* animation이 시작되기 전에 keyframes의 0% or from의 스타일을 적용시킨다. */
animation-fill-mode: backwards;

/* forwards와 backwards를 모두 적용한다. */
animation-fill-mode: both;