JSFiddle - React, Tailwind, and code Playground

by Sho KUWABARA

HTML

<ul>
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
</ul>

CSS

li {
    display: inline-block;
    margin: 20px;
}
li:nth-child(odd) {
    -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
}
li:nth-child(even) {
    -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
}
a {
    text-decoration: none;
    display: block;
    text-align: center;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50px;
    background: #666;
    color: #fff;
    -webkit-animation: vertical 1s ease-in-out infinite alternate;
}
li:nth-child(1) a {
    -webkit-animation-duration: 1.1s;
}
li:nth-child(2) a {
    -webkit-animation-duration: 1.3s;
}
li:nth-child(3) a {
    -webkit-animation-duration: 1.5s;
}
@-webkit-keyframes horizontal1 {
    0% {
        -webkit-transform:translateX(-3px);
    }
    100% {
        -webkit-transform:translateX(0px);
    }
}
@-webkit-keyframes horizontal2 {
    0% {
        -webkit-transform:translateX(3px);
    }
    100% {
        -webkit-transform:translateX(0px);
    }
}
@-webkit-keyframes vertical {
    0% {
        -webkit-transform:translateY(-10px);
    }
    100% {
        -webkit-transform:translateY(0px);
    }
}