使用精灵平滑CSS动画 [英] Smooth CSS animation with sprite

问题描述

我尝试为我的精灵制作动画，它类似于这。我会感激，如果有人可以展示如何使它更加顺利。我只有3个图像在我的sprite约。 1秒延迟，所以转换相当不好。

I have tried to animate my sprite and it is similar to this. I would appreciate if someone can show how to make it more smooth. I have only 3 images in my sprite with approx. 1 second delay, so the transition is quite bad.

我尝试使用：

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

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

But it did not work. I would really appreciate any help.

推荐答案

尝试添加一些过渡效果 ：

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

这篇关于使用精灵平滑CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！