• 애니메이션 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes)들로 이루어진다.
• transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다. 일반적으로 트랜지션 효과는 요소 프로퍼티값이 다른 값으로 변화할 때 주로 사용하며 요소의 로드와 함께 자동으로 발동되지 않는다.
• animation 프로퍼티는 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다.

애니메이션 프로퍼티

• animation-name : 사용하고자 하는 @keyframes rule을 선택한다.
  • 하나 이상의 애니메이션 이름을 지정할 수 있다.
• animation-duration : 한 사이클의 애니메이션에 소요되는 시간을 초단위 또는 밀리 초 단위로 지정한다.
• animation-timing-function : 애니메이션 효과를 위한 타이밍 함수를 지정한다.
• animation-delay : 요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위 또는 밀리 초 단위로 지정한다.
• animation-iteration-count : 애니메이션 재생 횟수를 지정한다.
• animation-direction : 애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.
• animation-fill-mode : 애니메이션 미 실행 시 요소의 스타일을 지정한다.
• animation-play-state : 애니메이션 재생 상태를 지정한다.
• animation : 모든 애니메이션 프로퍼티를 한번에 지정한다.

@keyframes

• css 애니메이션과 트랜지션 방식의 주된 차이는 @keyframes rule에 있다.
• @keyframses rule을 사용하면 애니메이션의 흐름 중의 여러 시점에서 CSS 프로퍼티 값을 지정할 수 있다.
• @keyframses rule은 시간의 흐름에 따라 애니메이션을 정의한다.