먼저 사자가 회전하는 애니메이션부터 적용하겠습니다.

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

/********************
*** Intro ***
********************/
#intro .introWrap .lion {
    animation: spinLion 1500ms linear infinite alternate;
             ➊          ➋      ➌      ➍       ➎
}

➊ 웹 사이트에 접속했을 때 특별한 조건이 없어도 애니메이션이 자동으로 동작하도록 animation 속성을 사용합니다. 애니메이션 이름은 회전하는 사자라는 의미를 담아서 spinLion 속성값을 입력합니다(다른 이름으로 수정해도 괜찮습니다).

➋ 애니메이션을 동작하는 데 걸리는 시간에는 1500ms^*를 입력합니다. 동작하는 데 걸리는 시간은 @keyframes 속성에 있는 from ~ to 부분으로 움직이는 시간을 뜻합니다.

➌ 애니메이션 속도에는 linear 속성값을 적용합니다. linear 속성값은 속도를 시작부터 끝까지 일정하게 지정할 때 사용합니다.

➍ 애니메이션 횟수에는 infinite 속성값을 적용합니다. infinite 속성값은 무제한을 뜻합니다.

➎ 애니메이션 진행 방향에는 alternate 속성값을 입력합니다. alternate 속성값은 from ~ to, to ~ from으로 움직이는 반복 효과를 나타냅니다.