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 { } 키워드는 애니메이션의 시작 지점과 끝 지점을 뜻합니다. fromto 대신 다음과 같이 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; }
    }
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.