JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<input type="checkbox" id="play"> <label for="play">Play</label>
<div id="prev"></div>

CSS

@keyframes play {
    0% { background-position: 0 0;}
    100% { background-position: 0 -3712px; }
}

@-moz-keyframes play {
    0% { background-position: 0 0;}
    100% { background-position: 0 -3712px; }
}

@-webkit-keyframes play {
    0% { background-position: 0 0;}
    100% { background-position: 0 -3712px; }
}

@-ms-keyframes play {
    0% { background-position: 0 0;}
    100% { background-position: 0 -3712px; }
}

@-o-keyframes play {
    0% { background-position: 0 0;}
    100% { background-position: 0 -3712px; }
}
#prev {
    width: 128px;
    height: 128px;
    background: url(http://s2.hostingkartinok.com/uploads/images/2012/07/ac44da2f574326d2a95f6f701843ea52.gif) 0 0 no-repeat;
}

#play:checked ~ #prev {
    -webkit-animation: play 1s steps(29, end) infinite;
    -moz-animation: play 1s steps(29, end) infinite;
    -ms-animation: play 1s steps(29, end) infinite;
    -o-animation: play 1s steps(29, end) infinite;
    animation: play 1s steps(29, end) infinite;
}