6.7.3 animation-duration 속성
animation-duration 속성은 애니메이션을 지속할 시간을 설정합니다. 속성값으로는 초(s)나 밀리초(ms) 단위의 시간을 넣으면 됩니다.
형식
animation-duration:<지속 시간>;
다음은 div 태그 요소의 배경색을 5초 동안 변경하는 예제 코드입니다.
06/07/animation-duration.html
div{
width:100px;
height:100px;
background-color:red;
animation-name:bgchange;
animation-duration:5s;
}
@keyframes bgchange{
0%{background-color:red;}
25%{background-color:orange;}
50%{background-color:yellow;}
100%{background-color:green;}
}
그림 6-75 실행결과