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 실행결과

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.