JSFiddle - React, Tailwind, and code Playground
HTML
<div>Pause and go</div>
CSS
div {
background:#333;
padding:10px;
width:100px;
height:100px;
color:#fff;
animation-name: animateAndPause;
animation-duration: 5s;
animation-iteration-count: infinite;
margin:100px;
}
@keyframes animateAndPause {
0% {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
90% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
100% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}