xxxxxxxxxx
/* the animation-play-state can have 2 values: paused or running */
#myElement{
animation: stuff;
animation-play-state: running;
}
#myElement{
animation: stuff;
animation-play-state: paused;
}
xxxxxxxxxx
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation-name: rotate;
animation-duration: 0.7s;
animation-iteration-count: infinite;
animation-play-state: paused;
}
.box:hover {
animation-play-state: running;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
xxxxxxxxxx
animation-play-state =
<single-animation-play-state>#
<single-animation-play-state> =
running |
paused