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是您要设置的任何数字的虚拟对象。

希望有所帮助。

使用CSS动画动画化图像

1 个答案: