JSFiddle - React, Tailwind, and code Playground

by NicoO

HTML

<ul class="nav">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

@-webkit-keyframes move {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}
@-moz-keyframes move {
 from { top: 0; left: 0; }
 to   { top: 100px; left: 100px; }
}
@keyframes move {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}

.nav
{
    margin: 30px 0 0 0;
    padding: 0;
    list-style: none;
}

.nav > li
{
    float: left;
    height: 40px;
    width: 40px;
    background-color: blue;   
}

.nav > li:hover
{
    -animation: move 10s steps(10) infinite alternate;
    -moz-animation: move 10s steps(10) infinite alternate;
    -webkit-animation: move 10s steps(10) infinite alternate;
}

.nav > li:not(:last-child)
{
    margin-right: 10px;
}

JavaScript

c