使用CSS动画制作图像动画

Question

是否可以只使用CSS动画创建高质量的动画图像(比如gif)，比如每40ms设置一次background-position-y值？

我知道使用javascript可以做到这一点，但如果这是可能的，并且得到大多数浏览器的支持，我更喜欢只使用CSS。

这是一个我想要动画的图像的例子：

http://i.stack.imgur.com/76EMV.jpg

Answer 1

这可以通过在CSS下使用keyframes play和animation来完成。你必须使用你想要保留的FPS来操纵每一帧的背景位置，然后你就会得到图像动画。

以为例，

1.确定背景位置

@keyframes play {
   from { background-position:    xxpx; }
     to { background-position: xxpx; }
} 

2.要让它按照您想要的秒数播放，步骤以及循环

    .class-name{
      -webkit-animation: play .xx steps(xx) infinite;
      -moz-animation: play .xx steps(xx) infinite;
      -ms-animation: play .xx steps(xx) infinite;
      -o-animation: play .xx steps(xx) infinite;
      animation: play .xx steps(xx) infinite;    }

PS: xx是您想要设置的任何数字的虚拟对象。

希望能有所帮助。