css - CSS3 过渡的缓入和缓出之间的区别

Question

CSS3过渡的区别是什么ease-in , ease-out ， 等等。？

Answer 1

CSS3 的过渡和动画支持缓动，正式称为“计时函数”。常见的是ease-in , ease-out , ease-in-out , ease , 和 linear ，或者您可以使用 cubic-bezier() 指定您自己的.

ease-in将缓慢启动动画，并全速完成。

ease-out将全速开始动画，然后缓慢结束。

ease-in-out将缓慢开始，在动画中间最快，然后缓慢结束。

ease就像 ease-in-out ，除了它开始比结束稍快。

linear不使用缓动。

最后，here's a great description的cubic-bezier语法，但通常没有必要，除非您想要一些非常精确的效果。

基本上，缓出是缓慢停止，缓入是缓慢加速，线性是两者都不做。您可以在 documentation for timing-function on MDN 找到更详细的资源。 .

如果您确实想要上述精确效果，那么令人惊叹的 Lea Verou 的 cubic-bezier.com就在你身边!它对于以图形方式比较不同的计时功能也很有用。

另一个， the steps() timing function , 就像 linear ，但只在转换的开始和结束之间执行有限数量的步骤。 steps()在 CSS3 动画中对我最有用，而不是在过渡中；一个很好的例子是用点加载指标。传统上，人们使用一系列静态图像(比如八个点，每帧两种颜色变化)来产生运动的错觉。带 steps(8)动画和一个 rotate变换，您正在使用运动来产生单独帧的错觉!多么有趣。