栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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
变换,您可以使用运动产生单独帧的错觉!真有趣



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/374336.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号