CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다.
CSS 애니메이션은 기존에 사용되던 스크립트를 이용한 애니메이션 보다 다음 세 가지 이유에서 이점을 가집니다.
엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.
애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.
한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.
애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다.
이 애니메이션의 중간 상태를 지정합니다. 중간 상태는 @keyframes 규칙을 이용하여 기술합니다.
애니메이션을 멈추거나 다시 시작할 수 있습니다.
중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.
애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.