6 키즈가오 night1, night2, morning 공간에 애니메이션 적용하기

night1 공간에서는 별 세 개가 작아졌다 커졌다를 반복합니다. night2와 morning 공간에는 해와 달이 수평으로 움직이는 애니메이션을 적용합니다.

먼저 night1 공간에 있는 별이 작아졌다 커졌다를 반복하도록 만들겠습니다. star1, start2, start3 모두에 같은 효과가 적용되므로 한 코드 안에 작성합니다. 애니메이션 이름을 pulseStar, 지속 시간을 1s, 속도를 linear, 횟수를 infinite, 진행 방향을 alternate로 적용합니다.

별의 크기는 transform: scale()로 조정합니다. from 키워드에는 기존 이미지 크기 비율이 유지되도록 transform: scale(1)을 적용하고, to 키워드에는 기존 이미지 크기보다 0.8배 줄도록 transform: scale(0.8)을 입력합니다.

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

/********************
*** Night1 ***
********************/
#night1 .starWrap .star1,
#night1 .starWrap .star2,
#night1 .starWrap .star3 {
    animation: pulseStar 1s linear infinite alternate;
}

@keyframes pulseStar {
    from { transform: scale(1); } /* 원본 크기에서 시작됩니다. */
    to { transform: scale(0.8); } /* 원본 크기보다 0.8배 작아집니다. */
}