시계 방향으로 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); } }