JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<a id="box" href="#nogo"></a>

CSS

#box {
            width:32px;
            height:32px;
            background:#fc0 url(http://www.iliadraznin.com/examples/png-background-animation/ball.png) 0 0 no-repeat;
            position:absolute;
            top:100px;
            left:50%;
        }
        
        @-webkit-keyframes movingbox{
            0% {    background-position:0; }
            16% {    background-position:0; }
            17% {    background-position:-32px; }
            33% {    background-position:-32px; }
            34% {    background-position:-64px; }
            50% {    background-position:-64px; }
            51% {    background-position:-96px; }
            67% {    background-position:-96px; }
            68% {    background-position:-64px; }
            84% {    background-position:-64px; }
            85% {    background-position:-32px; }
            100% {    background-position:-32px; }
        }
        
        #box {
            -webkit-animation:movingbox 1s infinite;
        }
        @-webkit-keyframes movingboxz{
            0% {    background-position:0; }

            100% {    background-position:0; }
        }
        
#box:hover{-webkit-animation-name:movingboxz}}