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

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

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

  语法做了很好的描述，但是除非您需要一些非常精确的效果，否则通常没有必要。

基本上，缓和是要减速至停止，缓和是要缓慢加速，而线性则不做任何事情。您可以在MDN的文档中

timing-function

找到更详细的资源。

如果您确实想要上述精确的效果，那么令人惊叹的LeaVerou的cubic-bezier.com将为您提供！对于以图形方式比较不同的计时功能也很有用。

另一个，该

steps()

定时功能，行为像

linear

，但是仅执行的过渡的开始和其端部之间的步骤的有限数。

steps()

对我来说，在CSS3动画中最有用，而不是在过渡中；一个很好的例子是用点加载指标。传统上，人们使用一系列静态图像（例如八个点，每帧两个颜色变化）来产生运动的错觉。通过

steps(8)

动画和

rotate

变换，您可以使用运动产生单独帧的错觉！真有趣