@charset "utf-8";

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

article {
    width: 400px; height: 400px; background: blue; margin: 100px auto;
    /*animation-name: rotation;*/
    /*animation-duration: 2s;*/
    /*animation-timing-function: linear;*/
    /*animation-iteration-count: infinite;*/
    /*animation-delay: 0s;*/
    /* 위에 다섯 줄 밑에 한줄로 축약 가능 */
    animation: rotation 2s linear 0s infinite;

    animation-play-state: running;
    transform: rotate(50deg);
}

article:hover {
    animation-play-state: paused;
}