그림 16-8 키즈가오 night1 공간: 별 세 개가 작아졌다 커졌다 하는 효과

night2와 morning 공간에 있는 달과 해를 움직이는 애니메이션은 앞에서 적용한 잠자리의 CSS 속성을 그대로 적용하면 됩니다. 달과 해의 애니메이션 이름을 각각 moveMoon과 moveSun으로 입력합니다. 속도를 linear, 지속 시간을 10s, 진행 방향을 alternate로 적용합니다. 달과 해가 동시에 움직이면 단조로울 수 있으므로 해가 조금 천천히 움직이도록 1.5초(1500ms)만큼 지연시킵니다(delay).

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

/********************
*** Night2 ***
********************/
#night2 .moon {
    animation: moveMoon linear 10s infinite;
}

/********************
*** Morning ***
********************/
#morning .sun {
    animation: moveSun linear 10s 1500ms infinite;
}