JSFiddle - React, Tailwind, and code Playground

by Erik Woods

HTML

<div class="css-animation-fun">
  Hover over me. Observe animation changes background color but pauses on mouse out.
</div>

CSS

body {
  margin: 0;
}

.css-animation-fun {
  animation: animation-fun 2s linear infinite alternate paused;
  background: #f00;
  color: #fff;
  cursor: pointer;
  margin-bottom: 10px;
  padding: 20px;
  text-align: center;
  width: 100%;
}

.css-animation-fun:hover {
  animation-play-state: running;
}

@keyframes animation-fun {
  to {
    background: #00f;
  }
}