JSFiddle - React, Tailwind, and code Playground

by cfddream

HTML

<img src="http://img.xiami.com/images/collect/869/69/12889869_1346296159_4.jpg" />
<div class="spin">
</div>

CSS

.spin {
    background-image: url(http://img.xiami.com/images/collect/869/69/12889869_1346296159_4.jpg);
    width: 30px;
    height: 30px;
    line-height: 30px;
    background-repeat: no-repeat;
    -moz-animation: spin 30ms infinite; 
}

@-moz-keyframes spin {
  0%   { background-position: 0 0; }
  5%   { background-position: -5px 0; }
  10%  { background-position: -10px 0; }
  15%  { background-position: -15px 0; }
  20%  { background-position: -20px 0; }
  25%  { background-position: -25px 0; }
  30%  { background-position: -30px 0; }
  35%  { background-position: -35px 0; }
  40%  { background-position: -40px 0; }
  45%  { background-position: -45px 0; }
  50%  { background-position: -50px 0; } 
  55%  { background-position: -55px 0; }
  60%  { background-position: -60px 0; }
  65%  { background-position: -65px 0; }
  70%  { background-position: -70px 0; }
  75%  { background-position: -75px 0; }
  80%  { background-position: -80px 0; }
  85%  { background-position: -85px 0; }
  90%  { background-position: -90px 0; }
  95%  { background-position: -95px 0; }
  100% { background-position: -100px 0; }
}