JSFiddle - React, Tailwind, and code Playground

Sprite animation

by tonytlwu

HTML

<h2>Animated sprite</h2>
<div><span></span></div>

CSS

@-webkit-keyframes loader {
  0% {
    -webkit-transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(60%);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}

@keyframes loader {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(60%);
  }
  100% {
    transform: translateX(0);
  }
}

@-webkit-keyframes spriter {
  0% {
    background-position: 0 -520px;
  }
  100% {
    background-position: -1080px -520px;
  }
}

@keyframes spriter {
  0% {
    background-position: 0 -520px;
  }
  100% {
    background-position: -1080px -520px;
  }
}

body {
  overflow: hidden;
}

div {
  animation: loader 6s infinite linear;
  -webkit-animation: loader 6s infinite linear;
  /* Safari and Chrome */
}

span {
  width: 130px;
  height: 130px;
  display: block;
  overflow: hidden;
  background-image: url(http://3.bp.blogspot.com/-zgW5t95Nf1U/VgPxCYh5hZI/AAAAAAAAAFE/HiVwd4CGad8/s1600/3.png);
  background-repeat: no-repeat;
  animation: spriter 1.0s steps(9) infinite linear;
  -webkit-animation: spriter 1.0s steps(9) infinite;
  /* Safari and Chrome */
}