결과를 보면 2초 후에 어떠한 조건 없이 자동으로 노란색 박스의 너비가 300px에서 600px로 세 차례 반복해서 변하는 것을 확인할 수 있습니다.

그럼 코드에 나온 각 속성에 대해 알아보겠습니다.

➊ animation-name 속성은 적용할 애니메이션의 이름을 지정할 때 사용합니다.

➋ animation-duration 속성은 애니메이션이 from ~ to로 동작하는 데 걸리는 시간입니다.

➌ animation-iteration-count 속성은 애니메이션 재생 횟수입니다. 제한 없이 무한으로 애니메이션 효과를 적용하고 싶다면 infinite 속성값을 적용합니다.

➍ animation-timing-function 속성은 transition-timing-function 속성과 마찬가지로 속도를 어떻게 가속시키고 감속시킬지 설정할 때 사용합니다.

➎ animation-direction 속성은 애니메이션 진행 방향으로 주요 속성값은 다음과 같습니다.

 

표 10-2 animation-direction의 주요 속성값

normal	from ~ to로 진행합니다.
reverse	to ~ from으로 진행합니다.
alternate	from ~ to로 갔다가 다시 to ~ from으로 진행합니다.
alternate-reverse	to ~ from으로 갔다가 다시 from ~ to로 진행합니다.