JSFiddle - React, Tailwind, and code Playground

animation seek test

by Csaba Hellinger

HTML

<div id="x" class="x"><div class="y"></div></div>

<button id="auto">Auto</button>
<button id="stop">Stop</button>
<button id="set">Set</button>

CSS

body { margin: 50px; }
button { margin-top: 50px; }

.x {
  width: 50px;
  height: 50px;
  background: blue;
  ---animation: rotate 4s infinite linear;
  ---animation-delay: -0.1s;
  border-radius: 50%;
  ---animation-play-state: paused;
  animation: none;
}

@keyframes rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 

@keyframes stop {
  0%   { color: red; }
  100% { color: pink; }
} 


.x:hover {
  /*animation: none;
  ---animation: stop 1s, rotate 4s infinite linear paused;
  ---animation: ;
  ---animation-delay: -0.2s;
  -animation-play-state: paused;
  animation-fill-mode: forwards;
  background: skyblue;
  */
}

.anim-auto {
  animation: rotate 4s infinite linear;
}

.anim-set {
  animation: rotate 1s infinite linear paused;
  animation-delay: -0.1s;
}




.y {
  width: 10px;
  height: 30px;
  background: inherit;
  margin: 0 auto;
  top: -29px;
  position: relative;
}

JavaScript

const el = document.getElementById('x');

document.getElementById('auto').onclick = () => {
	x.classList.remove('anim-set');
	x.classList.add('anim-auto');
};

document.getElementById('stop').onclick = () => {
	x.classList.remove('anim-set');
	x.classList.remove('anim-auto');
};

document.getElementById('set').onclick = () => {
	x.classList.remove('anim-auto');
  x.classList.add('anim-set');
};