JSFiddle - React, Tailwind, and code Playground

by gmcalab

HTML

<div id='test'>


</div>

CSS

#test {
  background-color: red;
  border: 1px solid red;
  height: 200px;
  position: relative;
}

@keyframes hide {
  from {
   
    left:0;
  }

  to {
    left: 200%;
  }
}

.hide {
  animation-name: hide;
  animation-duration: 1000ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

JavaScript

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

x.addEventListener('click', function (event) {
   x.classList.add('hide');
}, false);