JSFiddle - React, Tailwind, and code Playground

by jeanluca

HTML

<div class="target">

</div>

SCSS

div {
  width: 100px;
  height: 100px;
  background-color: gray;
  cursor: pointer;
}

.animate {
    // animation-direction: reverse;
    animation-name: action;
    animation-duration: 2s;
    animation-timing-function: linear;
    background-color: green;
} 


@keyframes action {
  0% {
    background-color: gray; 
  }  

  50% {
    background-color: red;
  }

  100% {
     background-color: green;
  }
}

JavaScript

const div = document.querySelector('.target')
div.addEventListener('click', (e) => {
   div.classList.add('animate');
   // div.classList.toggle('reverse');
})