Ninja Sprite (Animated)

HTML
<div class="sprite"></div>
SCSS
.sprite { width: 160px; height: 160px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/13060/ninja-sprite.png'); animation: play .6s steps(8) infinite; } @keyframes play { from { background-position: 0px; } to { background-position: -1280px; } }
JAVASCRIPT
Expand for more options Login