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


Answers:


246

CSS3的过渡和动画支持缓动,正式称为“定时功能”。常见的有ease-inease-outease-in-outease,和linear,或者您可以使用自己指定cubic-bezier()

  • ease-in 将缓慢开始动画,并以全速结束。
  • ease-out 将以全速开始动画,然后缓慢完成。
  • ease-in-out 将缓慢开始,在动画中间最快,然后缓慢完成。
  • ease就像一样ease-in-out,只是它的开始快于结束。
  • linear 不使用任何宽松措施。
  • 最后,这里cubic-bezier语法做了很好的描述,但是通常不需要,除非您想要一些非常精确的效果。

基本上,缓和是要减速至停止,缓和是要缓慢加速,线性不做任何事情。您可以在MDN文档中timing-function找到更多详细资源。

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

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


1
不错的描述。解决了我的查询。
学生
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.