css - CSS3 transitions 的 ease-in 和 ease-out 之间的区别

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