➏ animation-delay 속성은 transition-delay 속성과 마찬가지로 애니메이션이 동작하는 시간을 지연시킬 때 사용합니다. 기본값은 0s로 설정되어 있습니다.
TIP
이 코드에서는 animation-iteration-count: 6;을 적용했는데 반복 효과가 6회가 아닌 3회입니다. from에서 to로 이동하는 데 1회가 계산되고 다시 to에서 from으로 이동하는 데 1회가 각각 계산되기 때문입니다.
➐ @keyframes 속성은 애니메이션이 효과를 지정하는 공간입니다. @keyframes 속성 옆에는 animation-name 속성의 속성값을 입력하여 animation- 속성과 @keyframes 속성을 연동시켜야 합니다.
from { }와 to { } 키워드는 애니메이션의 시작 지점과 끝 지점을 뜻합니다. from과 to 대신 다음과 같이 0%와 100%를 입력할 수도 있습니다.
@keyframes changeWidth {
0%{ width: 300px;}
100%{ width: 600px;}
}
효과를 세밀하게 조정하고 싶다면 0%와 100% 사이에 숫자(예를 들어 50%)를 추가합니다.
@keyframes changeWidth {
0% { width: 300px; }
50%{ background-color: red; }
100% { width: 600px; }
}