animation

---

animation-name

animation-name: animation-name|none|initial|inherit;

@keyframes 에서 명명한 animation-name을 지정합니다.
none : 기본값, 애니메이션을 지정하지 않습니다.

---

animation-duration

animation-duration: time|initial|inherit;

애니메이션이 한주기를 완료하는데 걸리는 시간을 지정합니다.
ms(밀리초), s(초) 단위로 지정합니다.
기본값이 0이므로 지정하지 않으면 애니메이션이 동작하지 않습니다.

---

animation-iteration-count

animation-iteration-count: number|infinite|initial|inherit;

애니메이션의 반복 횟수를 지정합니다.
number 기본값 1이며 지정하지 않은경우 1번만 재생됩니다.
infinite 값 지정시 무한 반복 재생됩니다.

---

animation-timing-function

animation-timing-function: value|initial|inherit;

애니메이션의 속도 곡선을 지정합니다.
참고 : 전환효과의 transition-timing-function 값과 동일합니다.

---

animation-delay

animation-delay: time|initial|inherit;

애니메이션이 시작되기까지 대기할 시간을 지정합니다.
number 기본값 0이며 지정하지 않은 경우 애니매이션이 바로 재생됩니다.
음수값이 허용됩니다. 음수값 지정시 지정한 시간만큼 재생된 상태에서 애니메이션이 시작됩니다.

---

animation-direction

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

애니메이션을 진행 방향을 지정합니다.
alternate 값을 지정하면 애니메이션이 끝난후 방향이 변경되어 부드러운 애니메이션으로 반복할 수 있습니다.

---

animation-play-state

animation-play-state: paused|running|initial|inherit;

애니메이션의 재생여부를 지정합니다.
JavaScript에서 이 속성을 사용하여 애니메이션을 일시정지할 수 있습니다.

---

animation-fill-mode

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

애니메이션이 재생되지 않을 때 요소의 스타일을 지정합니다.

---

animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

애니메이션의 속성을 일괄 적용할때 사용합니다