50% { background-color: red; }를 추가하면 애니메이션이 진행되는 중간 지점인 50% 지점부터는 배경색이 노란색에서 빨간색으로 변합니다.

그림 10-8 애니메이션이 진행되는 50% 지점부터 배경색이 노란색에서 빨간색으로 변한다

animation- 속성도 transition- 속성과 마찬가지로 한 줄로 정리할 수 있습니다. 이때 먼저 나오는 시간이 duration이고 나중에 나오는 시간이 delay입니다.

animation: changeWidth 3s 6 ease alternate 2s;