CSS3 过渡缓入缓出的区别答案

【问题标题】：Difference between CSS3 transitions' ease-in and ease-outCSS3 过渡缓入缓出的区别
【发布时间】：2012-03-26 15:01:12
【问题描述】：

CSS3 过渡的ease-in、ease-out 等有什么区别？

【问题讨论】：

我意识到我正在回复一个非常古老的评论，但我需要指出，w3schools 不是标准的来源（阅读w3fools.com），以使其他阅读本文的人受益。正确的链接是w3.org/TR/css3-transitions/#transition-timing-function-property

标签： css css-transitions

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

【讨论】：

很好的描述。解决了我的问题。