CSS3过渡的缓入和缓出之间的区别
什么是CSS3过渡的区别ease-in
,ease-out
等等?
回答:
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
变换,您可以使用运动产生单独帧的错觉!真有趣
以上是 CSS3过渡的缓入和缓出之间的区别 的全部内容, 来源链接: utcz.com/qa/435459.html