JSFiddle - React, Tailwind, and code Playground

by hannahska

HTML

<div>
Animate me!
</div>

<button>
Do it
</button>

CSS

@keyframes changeStyle {
  0% {
    color: red;
  }

  49% {
    margin-left: 0;
  }
 
  50% {
    margin-left: 50px;
  }
  
  99% {
    opacity: 1;
  }

  100% {
    color: red;
    margin-left: 50px;
    opacity: .5;
  }
}

.animated {
  animation-name: changeStyle;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

button {
  margin-top: 20px;
}

JavaScript

document.querySelector('button').addEventListener('click', () => {
	document.querySelector('div').className = 'animated';
});