더북(TheBook)

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

/********************
*** Forest3 ***
********************/
#forest3 .forest3Wrap .smallBird {
    animation: spinSmallbird 1000ms linear infinite alternate;
}

@keyframes spinSmallbird {
    from { transform:rotate(0deg); } /* 0도에서 시작합니다. */
    to { transform:rotate(10deg); } /* 10도까지 움직입니다. */
}

#forest3 .forest3Wrap .bigBird {
    animation: spinBigbird 1000ms linear infinite alternate;
}

@keyframes spinBigbird {
    from { transform:rotate(-10deg); } /* -10도에서 시작합니다. */
    to { transform:rotate(10deg); } /* 10도까지 움직입니다. */
}

 

그림 16-6 키즈가오 forest3 공간: 작은 새와 큰 새가 움직이는 애니메이션

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