Difference between CSS3 transitions' ease-in and ease-out

CSS3的过渡和动画支持宽松，正式名称为“定时功能”。最常见的是 ease-in、 ease-out、 ease-in-out、 ease和 linear，或者你可以使用 cubic-bezier()指定你自己的。

• ease-in将缓慢启动动画，并以全速完成。
• ease-out将以全速启动动画，然后慢慢完成。
• ease-in-out会慢慢地开始，在动画的中间是最快的，然后慢慢地结束。
• ease类似于 ease-in-out，只不过它的起始速度略快于结束速度。
• linear不使用宽松货币政策。
• 最后，cubic-bezier语法的 here's a great description，但是通常不需要，除非您想要一些非常精确的效果。

从根本上说，放松就是慢到停止，放松就是慢慢加速，线性就是两者都不做。您可以在 关于 MDN 上 timing-function的文档上找到更详细的资源。

如果你确实想要上述精确的效果，令人惊讶的 Lea Verou 的 Cubic-bezier.com是为你！它对于图形化地比较不同的计时函数也很有用。

另一个是 steps()计时功能，它的作用类似于 linear，但是只在转换的开始和结束之间执行有限数量的步骤。对我来说，steps()在 CSS3动画中非常有用，而不是在过渡阶段; 一个很好的例子是用点装载指示器。传统上，人们使用一系列的静态图像(比如说八个点，每帧两个颜色变化)来产生运动的错觉。通过一个 steps(8)动画和一个 rotate变换，你正在使用运动来产生分离帧的错觉！真有趣。