Skip to content

Instantly share code, notes, and snippets.

@ahallora

ahallora/animation.html

Created October 30, 2016 19:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ahallora/99c82fd0b37efffee814d743cbf91c3e to your computer and use it in GitHub Desktop.
Save ahallora/99c82fd0b37efffee814d743cbf91c3e to your computer and use it in GitHub Desktop.
Download ZIP
PNG Sprite Animation with CSS
Raw
animation.html
<style type="text/css">
.pngAnimation {
background: url(../assets/img/ourdio-sprite-png.png) no-repeat left top;
background-size: 2900%; /* 28+1 steps * 100% */
height: 50px;
width: 50px;
animation: o-burst 1000ms steps(28) infinite;
}
@keyframes o-burst{
0% { background-position:left }
100% { background-position:right }
}
</style>
<div class="pngAnimation"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment