JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<div id="box">
    CSS3 animation example
</div>

CSS

#box {
    background-color: gray;
    color: #fff;
    padding: 20px;
    -webkit-animation: boxanimation 5s 5 alternate;
    -moz-animation: boxanimation 5s 5 alternate;
    animation: boxanimation 5s 5 alternate;
}
#box:hover {
    /* ホバーすると一時停止する */
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
@-webkit-keyframes boxanimation {
    from {
        background-color: red;
        color: blue;
    }
    to {
        background-color: blue;
        color: red;
    }
}