더북(TheBook)

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

#intro .introWrap .rabbit {
    /* from ~ to로 움직이는 조건을 조정합니다. */
    animation: spinRabbit 1000ms linear infinite alternate;
}

@keyframes spinRabbit {
    /* 움직이는 각도를 조정합니다. */
    from { transform:rotate(0deg); }
    to { transform:rotate(5deg); }
}

#intro .introWrap .bear {
    /* from ~ to로 움직이는 조건을 조정합니다. */
    animation: spinBear 1000ms linear infinite alternate;
}

@keyframes spinBear {
    /* 움직이는 각도를 조정합니다. */
    from { transform:rotate(10deg); }
    to { transform:rotate(-10deg); }
}

#intro .introWrap .monkey {
    /* from ~ to로 움직이는 조건을 조정합니다. */
    animation: spinMonkey 800ms linear infinite alternate;
}

@keyframes spinMonkey {
    /* 움직이는 각도를 조정합니다. */
    from { transform:rotate(20deg); }
    to { transform:rotate(50deg); }
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.