什么是CSS3过渡的区别ease-in,ease-out等等?
ease-in
ease-out
CSS3的过渡和动画支持缓动,正式称为“定时功能”。常见的有ease-in,ease-out,ease-in- out,ease,和linear,或者您可以使用自己指定cubic-bezier()。
ease-in- out
ease
linear
cubic-bezier()
ease-in-out
cubic-bezier
基本上,缓和是要减速至停止,缓和是要缓慢加速,而线性则不做任何事情。您可以在MDN的文档中timing-function找到更详细的资源。
timing-function
如果您确实想要上述精确的效果,那么令人惊叹的LeaVerou的cubic-bezier.com将为您提供!对于以图形方式比较不同的计时功能也很有用。
另一个,该steps()定时功能,行为像linear,但是仅执行的过渡的开始和其端部之间的步骤的有限数。steps()对我来说,在CSS3动画中最有用,而不是在过渡中;一个很好的例子是用点加载指标。传统上,人们使用一系列静态图像(例如八个点,每帧两个颜色变化)来产生运动的错觉。通过steps(8)动画和rotate变换,您可以使用运动产生单独帧的错觉!真有趣
steps()
steps(8)
rotate