基於CSS3 Sprite僵屍行走動畫特效

分享一款基於CSS3 Sprite僵屍行走動畫特效。這是一款使用animation動畫的steps屬性製作的僵屍行走CSS3 Sprite動畫特效。效果圖如下 ：

線上預覽    源碼下載

實現的代碼。

css代碼：

@charset "utf-8";
/* CSS Document */
/* General CSS */
 
*{
    padding:0px;
    margin:0px;
     
}
 
body,html {
     
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    font-weight: 700;   
}
 
/*DEMO CSS*/
 
body{
 
    position:relative;
    background: transparent url("../img/background.jpg") no-repeat scroll center top / cover;
    background-attachment:fixed;
}
 
.zoombie {
    /*Our png sprite is 2000px x 312px, then each frame is 200px x 312px*/
    width: 200px;
    height: 312px;
    background-image: url("../img/walkingdead.png");
    -webkit-animation: play 1.8s steps(10) infinite;
    -moz-animation: play 1.8s steps(10) infinite;
    -ms-animation: play 1.8s steps(10) infinite;
    -o-animation: play 1.8s steps(10) infinite;
    animation: play 1.8s steps(10) infinite ;
 
}
     
 
@-webkit-keyframes play {
    from { background-position:    0px; }
    to { background-position: -2000px; }
}
 
 
@-moz-keyframes play {
    from { background-position:    0px; }
    to { background-position: -2000px; }
}
 
@-ms-keyframes play {
    from { background-position:    0px; }
    to { background-position: -2000px; }
}
 
@-o-keyframes play {
    from { background-position:    0px; }
    to { background-position: -2000px; }
}
 
@keyframes play {
    from { background-position:    0px;  }
    to { background-position: -2000px;  }
}
 
 
 
#wrapper {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

via：http://www.w2bc.com/article/2015-12-15-css3-sprite-run