css3实现帧动画

css代码

<stye type="text/css">
        
 .ani{
    height:100%;
    width:100%;
 
    background:url(xulie.jpg) no-repeat 0 0;
    -webkit-animation:flag_ani 6s steps(30) infinite;
}
@-webkit-keyframes flag_ani{
    100% {
       background-position:-19200px 0;
    }    
}
    </style>

html代码

<div class="ani">
    
              </div>
    解析：steps(30)表示让整个动画在30个关键帧之间切换。这个兔斯基揉脸的图片中包含30帧，所以这里设置了30。而且我们的动画时长是6ms，也就是说每一帧停留0.2ms，这就和普通的GIF动图达到了一样的效果。而且animation可以控制播放状态，PNG可以提供Alpha通道。