问CSS3转换的缓入缓出的区别

EN

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

• ease-in将缓慢启动动画，全速结束speed.
• ease-out将全速启动动画，然后finish slowly.
• ease-in-out将缓慢启动，在动画中间最快，然后finish slowly.
• ease类似于ease-in-out，只是启动速度略快于ends.
• linear使用no easing.
• Finally，here's a great description of cubic-bezier语法，但通常不需要，除非您想要一些非常精确的效果。

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

如果你确实想要上述的精确效果，令人惊叹的Lea Verou的cubic-bezier.com就在那里为你服务！它对于以图形方式比较不同的计时函数也很有用。

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