使用 CSS 动画对图像进行动画处理

【问题标题】：Animating an Image using CSS animation使用 CSS 动画对图像进行动画处理
【发布时间】：2013-06-12 18:20:42
【问题描述】：

是否可以仅使用 CSS 动画创建高质量的动画图像（如 gif），例如每 40 毫秒设置一次 background-position-y 值？

我知道使用 javascript 可以做到这一点，但如果大多数浏览器都支持且可行的话，我更愿意只使用 CSS。

这是我想要制作动画的图像示例：

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

【问题讨论】：

标签： css css-animations

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

希望有所帮助。

【讨论】：