JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<div id="box">
    CSS3 Animation Example
</div>

CSS

@-webkit-keyframes boxAnimation {
    from {
        background-color: red;
        color: blue;
    }
    to {
        background-color: blue;
        color: red;
    }
}

#box {
    padding: 15px;
    background-color: gray;
    color: #fff;
    
    -webkit-animation: boxAnimation 5s 5 alternate;
}
#box:hover {
    /*一時停止 デフォルト値はrunning*/
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}