SVG Keyframe Animation in CSS

by m4xout

HTML

<div class="walk_right"></div>

CSS

.walk_right {
    -webkit-animation:walk-cycle 0.5s steps(4) infinite;
            animation:walk-cycle 0.5s steps(4) infinite;
    background: url('https://svgshare.com/i/UyD.svg') 0 0 no-repeat; 
    height:20px;
    width:20px;
    margin:20px auto 0;
    zoom:4;
}

@-webkit-keyframes walk-cycle {  
      0% {background-position:0 0;}
    100% {background-position:-80px 0;}
}

@keyframes walk-cycle {  
      0% {background-position:0 0; } 
    100% {background-position:-80px 0;}
}