JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<div>hey

CSS

div {
    width: 200px;
    height: 200px;
    background: steelblue;
    -webkit-animation: myanim 4s normal; /* Chrome, Safari 5+ */
}

div:hover {
}

@-webkit-keyframes myanim {
  0%   { -webkit-transform: translateX(20px) translateY(20px); }
  100% { -webkit-transform: translateX(20px) translateY(0); color: red; }
  to { -webkit-transform: translateX(0) translateY(100px); color: blue; }
}