특정 시점은 0%, 100%처럼 시간에 대한 퍼센트로 지정합니다. 또는 애니메이션 시작을 의미하는 0%와 종료를 의미하는 100%를 from과 to 키워드로 대체해 작성할 수도 있습니다.
@keyframes bgchange{
from{background-color:red;}
to{background-color:green;}
}
또한, 중간에 얼마든지 시점을 정해 스타일 속성을 정의할 수 있습니다. 예를 들어, 다음 코드는 애니메이션이 진행되는 과정 중에 0%, 25%, 50%, 100% 시점에 각각 배경색을 변경하도록 정의합니다.
06/07/animation-basic.html
@keyframes bgchange{
0%{background-color:red;}
25%{background-color:orange;}
50%{background-color:yellow;}
100%{background-color:green;}
}