JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<div class="sprite"></div>

CSS

.sprite
{
    position: absolute;
  
    left: 50%;
    top: 33%;
    width: 1px; /* the frame width and height should be of 1 pixel */
    height: 1px;
  
    margin: -16px 0 0 -16px; /* the increase via transform doesn’t influence the margin  */
  
    background: url(http://www.splashnology.com/uploads/2011/07/sprite.png) no-repeat 0 0;
    background-size: 3px 1px; /* we also decrease the size of a background */
  
    -webkit-animation-name: sprite;
    -webkit-animation-duration: .3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-transform: scaleX(32) scaleY(32); /*  let’s increase the size of the element*/
    -webkit-transform-origin: top left;
}
@-webkit-keyframes sprite
{
    /* then we should move the background for 1 pixel every time */
    0.000%
    {
        background-position: -0px 0;
    }
    25.000%
    {
        background-position: -1px 0;
    }
    50.000%
    {
        background-position: -2px 0;
    }
    /* frankly speaking, I didn’t get the idea, why should we move it */
    /* for 1 more pixel (because it should be */
    /* the empty frame). otherwise it won’t show us all  */
    /* animation frames. */
    75.000%
    {
        background-position: -3px 0;
    }
    100.000%
    {
        background-position: -0px 0;
    }
}