한 줄로 작성한 animation 속성을 다음과 같이 풀어서 정리할 수도 있습니다.
animation-name: spinLion; /* 애니메이션 이름을 spinLion으로 설정합니다 */ animation-duration: 1500ms; /* 애니메이션 진행 시간을 1.5초로 지정합니다. */ animation-timing-function: linear; /* 애니메이션 속도를 일정하게 적용합니다. */ animation-iteration-count: infinite; /* 애니메이션을 무한 반복합니다. */ animation-direction: alternate; /* 애니메이션을 반복해서 움직입니다. */
애니메이션 조건을 입력했다면 @keyframes 속성의 from ~ to 키워드에 회전 효과를 적용해야 합니다. @keyframes 속성을 적용하기 전에는 앞에서 작성한 애니메이션 이름을 옆에 작성해야 하는 것을 잊지 마세요.
사자의 각도를 조정하기 위해 Day 10에서 언급한 transform: rotate()를 사용합니다. from과 to 키워드에는 각각 transform: rotate(-10deg)와 transform: rotate(10deg)를 적용합니다.
그럼 사자는 -10° ~ +10°, 총 20°를 움직이며 회전합니다.
예제 소스 Exercise/16장/KidsGao/css/animation.css
/******************** *** Intro *** ********************/ #intro .introWrap .lion { animation: spinLion 1500ms linear infinite alternate; } @keyframes spinLion{ from { transform:rotate(-10deg); } /* -10도 지점에서 시작됩니다. */ to { transform:rotate(10deg); } /* 10도 지점까지 움직입니다. */ }