带有精灵的平滑 CSS 动画答案

【问题标题】：Smooth CSS animation with sprite带有精灵的平滑 CSS 动画
【发布时间】：2016-09-21 16:15:12
【问题描述】：

我尝试为我的精灵设置动画，它类似于this。如果有人能展示如何使它更顺利，我将不胜感激。我的精灵中只有 3 张图像，大约有 3 张图像。 1 秒延迟，所以过渡非常糟糕。

我试过用：

from {
    -webkit-transform: translateX(..);
}
to { 
    -webkit-transform: translateX(..);
}

但它没有工作。非常感谢任何帮助。

【问题讨论】：

我认为如果不在 sprite 中添加多个版本的图像，您无法使其看起来平滑。 steps 函数是一个楼梯，它总是会从一个点跳到另一个点。如果我们将其更改为 steps 以外的任何内容，那么您的图像将滑动而不是旋转外观。
也许有办法旋转单个 2D 图像？
是的，有。您始终可以使用透视旋转图像。
我应该使用rotateZ()吗？以及如何进行半旋转）
但它不会产生与您的精灵相同的效果（除非您进行复杂的 3D 旋转）。不会有深度（例如，显示手机侧面的第一个精灵）。

【解决方案1】：

尝试添加一些过渡效果，例如：

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

【讨论】：