코드를 실행하면 div 요소의 배경색이 처음에는 빨간색이었다가 키 프레임에 정의된 시점에 따라 주황색, 노란색, 초록색 순으로 변경됩니다. 애니메이션을 사용한 전환 효과는 5초 동안 실행됐다가 다시 요소의 초기색인 빨간색으로 돌아갑니다. 애니메이션 속성이 한 번 실행하고 나면 실행되기 전 상태로 돌아가기 때문입니다.
TIP | 애니메이션은 키 프레임, animation-name 속성, animation-duration 속성만 있으면 전환 효과를 적용할 수 있습니다. 그러나 3가지 중 하나라도 빠지면 전환 효과는 적용되지 않습니다. 3가지를 기본으로 나머지 애니메이션 속성을 추가하면 효과를 더 세부적으로 제어할 수 있습니다.