JSFiddle - React, Tailwind, and code Playground

by Talty09

HTML

<div>
    <ul id="list">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</div>

CSS

#list
{
    position: absolute;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: left;
}
#list li
{
    padding: 5px 0 5px 0;
    margin: 20px 0 20px 20px;
    background: black;
    width: 175px;
}
#list li a
{
    position: relative;
    color: White;
    font-weight: bold;
    text-decoration: none;
}
#list li a:hover
{
    -moz-animation: linkHover .5s;
    -moz-animation-fill-mode: forwards;
    -webkit-animation: linkHover .5s;
    -webkit-animation-fill-mode: forwards;
    animation: linkHover .5s;
    animation-fill-mode: forwards;
}
@-webkit-keyframes linkHover
{
    0% { left: 0px; animation-timing-function: ease-out; }
    25% { left: 4px; animation-timing-function: ease-out; }
    50% { left: 8px; animation-timing-function: ease-out; }
    75% { left: 12px; animation-timing-function: ease-out; }
    100% { left: 16px; animation-timing-function: ease-out; }
}
@-moz-keyframes linkHover
{
    0% { left: 0px; animation-timing-function: ease-out; }
    25% { left: 4px; animation-timing-function: ease-out; }
    50% { left: 8px; animation-timing-function: ease-out; }
    75% { left: 12px; animation-timing-function: ease-out; }
    100% { left: 16px; animation-timing-function: ease-out; }
}
@keyframes linkHover
{
    0% { left: 0px; animation-timing-function: ease-out; }
    25% { left: 4px; animation-timing-function: ease-out; }
    50% { left: 8px; animation-timing-function: ease-out; }
    75% { left: 12px; animation-timing-function: ease-out; }
    100% { left: 16px; animation-timing-function: ease-out; }
}