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 不使用宽松.
• 最后,这里有一个很好的cubic-bezier语法描述,但除非你想要一些非常精确的效果,否则通常没有必要.

基本上,宽松是缓慢停止,缓和是缓慢加速,而线性则不会.您可以在MDN的文档中timing-function找到更详细的资源.

如果您确实需要上述精确效果,那么惊人的Lea Verou 立方体-bezier.com就在您身边!它对于以图形方式比较不同的定时功能也很有用.

另一个,该steps()定时功能,行为像linear,但是仅执行的过渡的开始和其端部之间的步骤的有限数.steps()在CSS3动画中对我来说最有用,而不是在过渡中; 一个很好的例子是用点加载指标.传统上,人们使用一系列静态图像(比如八个点,每帧改变两种颜色)来产生运动的错觉.通过steps(8)动画和rotate变换,您可以使用动作来产生单独帧的错觉!多么有趣