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 变换，您正在使用运动来产生单独帧的错觉！多么有趣。