JSFiddle - React, Tailwind, and code Playground

by Brian Birtles

HTML

<p>
Approach 1 (appending the animation)
</p>
<div id=a></div>
<p>
Approach 2 (manually applying the current result)
</p>
<div id=b></div>
<p>
Approach 3 (using <code>commitStyles</code>)
</p>
<div id=c></div>

CSS

div {
  width: 100px;
  height: 100px;

  animation: rotate-1 4s forwards;
}

@keyframes rotate-1 {
  100% { transform: rotate(360deg); }
}
@keyframes rotate-2 {
  100% { transform: rotate(90deg); }
}

#a {
  background: blue;
}

#b {
  background: red;
}

#c {
  background: green;
}

JavaScript

setTimeout(() => {
  a.style.animationName = 'rotate-1, rotate-2';
  a.style.animationPlayState = 'paused, running';
}, 2000);
setTimeout(() => {
  // Store the computed style from animation in specified style
  b.style.transform = getComputedStyle(b).transform;
  b.style.animationName = 'rotate-2';
}, 2000);
setTimeout(() => {
  const anim = c.getAnimations()[0];
  anim.commitStyles();
  c.style.animationName = 'rotate-2';
}, 2000);