3 키즈가오 farm3 공간에 애니메이션 적용하기

farm3 공간에는 기계의 타이머와 톱날이 회전하는 애니메이션을 적용합니다. 타이머와 왼쪽 톱날은 시계 방향으로 360° 회전하고 오른쪽 톱날은 시계 반대 방향으로 360° 회전합니다.

intro 공간과 마찬가지로 타이머와 톱날의 회전 애니메이션에는 animation과 transform 속성을 사용합니다. 각 영역의 애니메이션 이름에서 타이머는 rotateTimer, 왼쪽 톱날은 rotateLeftSaw, 오른쪽 톱날은 rotateRightSaw로 입력합니다.

from ~ to로 동작하는 데 걸리는 시간을 10000ms(10초), 속도를 linear, 횟수를 infinite로 적용합니다.

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

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

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

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