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通道。