브라우저 호환성을 고려하여 하위 브라우저에서도 해당 애니메이션을 적용하려면 접두사(prefix)를 붙여야 합니다(Day 10 참조).

    예제 소스 Exercise/16장/KidsGao/css/animation.css

    /********************
    *** Intro ***
    ********************/
    #intro .introWrap .lion {
        /* -webkit- : 크롬, 사파리 브라우저를 고려합니다. */
        -webkit-animation: spinLion 1500ms linear infinite alternate; 
        
        /* -moz- : 파이어폭스 브라우저를 고려합니다. */
        -moz-animation: spinLion 1500ms linear infinite alternate; 
    
        animation: spinLion 1500ms linear infinite alternate;
    }
    
    /* -webkit- : 크롬, 사파리 브라우저를 고려합니다. */
    @-webkit-keyframes spinLion { 
        from { -webkit-transform: rotate(-10deg); }
        to { -webkit-transform: rotate(10deg); }
    }
    
    /* -moz- : 파이어폭스 브라우저를 고려합니다. */
    @-moz-keyframes spinLion { 
        from { -moz-transform: rotate(-10deg); }
        to { -moz-transform: rotate(10deg); }
    }
    
    @keyframes spinLion { 
        from { transform:rotate(-10deg); }
        to { transform:rotate(10deg); }
    }
    
    #intro .introWrap .rabbit {
        -webkit-animation: spinRabbit 1000ms linear infinite alternate;
        -moz-animation: spinRabbit 1000ms linear infinite alternate;
        animation: spinRabbit 1000ms linear infinite alternate;
    }
    
    @-webkit-keyframes spinRabbit {
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(5deg); }
    }
    
    @-moz-keyframes spinRabbit {
        from { -moz-transform: rotate(0deg); }
        to { -moz-transform: rotate(5deg); }
    }
    
    @keyframes spinRabbit {
        from { transform:rotate(0deg); }
        to { transform:rotate(5deg); }
    }
    
    #intro .introWrap .bear {
        -webkit-animation: spinBear 1000ms linear infinite alternate;
        -moz-animation: spinBear 1000ms linear infinite alternate;
        animation: spinBear 1000ms linear infinite alternate;
    }
    
    @-webkit-keyframes spinBear {
        from { -webkit-transform: rotate(10deg); }
        to { -webkit-transform: rotate(-10deg); }
    }
    
    @-moz-keyframes spinBear {
        from { -moz-transform: rotate(10deg); }
        to { -moz-transform: rotate(-10deg); }
    }
    
    @keyframes spinBear {
        from { transform:rotate(10deg); }
        to { transform:rotate(-10deg); }
    }
    
    #intro .introWrap .monkey {
        -webkit-animation: spinMonkey 800ms linear infinite alternate;
        -moz-animation: spinMonkey 800ms linear infinite alternate;
        animation: spinMonkey 800ms linear infinite alternate;
    }
    
    @-webkit-keyframes spinMonkey {
        from { -webkit-transform: rotate(20deg); }
        to { -webkit-transform: rotate(50deg); }
    }
    
    @-moz-keyframes spinMonkey {
        from { -moz-transform: rotate(20deg); }
        to { -moz-transform: rotate(50deg); }
    }
    
    @keyframes spinMonkey {
        from { transform:rotate(20deg); }
        to { transform:rotate(50deg); }
    }
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.