더북(TheBook)

시계 방향으로 360° 회전하는 애니메이션을 적용하려면 from 키워드를 transform: rotate(0deg), to 키워드를 transform: rotate(360deg)로 입력합니다. 시계 반대 방향으로 회전하는 애니메이션을 적용하려면 from 키워드를 transform: rotate(360deg), to 키워드를 transform: rotate(0deg)로 입력합니다.

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

/********************
*** Farm3 ***
********************/
#farm3 .machineWrap .timer {
    animation: rotateTimer 10000ms linear infinite;
}

/* 시계 방향으로 움직입니다. */
@keyframes rotateTimer {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

#farm3 .machineWrap .saw1 {
    animation: rotateLeftSaw 10000ms linear infinite;
}

/* 시계 방향으로 움직입니다. */
@keyframes rotateLeftSaw {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

#farm3 .machineWrap .saw2 {
    animation: rotateRightSaw 10000ms linear infinite;
}

/* 시계 반대 방향으로 움직입니다. */
@keyframes rotateRightSaw {
    from { transform:rotate(360deg); }
    to { transform:rotate(0deg); }
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.