使用精灵平滑CSS动画

Question

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

我试图使用：

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

但它没有用。 我真的很感激任何帮助。

Answer 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;