JSFiddle - React, Tailwind, and code Playground

by kazumasa sait

HTML

<div id="box">
    css3 amimation 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{
  -webkit-animation-play-state: paused;/*一時停止*/  
    animation-play-state: paused;/*一時停止*/  
}