• 欢迎光临~

CSS笔记 - 09 过渡

开发技术 开发技术 2022-10-12 次浏览

9. 过渡

  • 通过过渡可以指定一个属性发生变化时的切换方式,通常用过渡制作一些简单的动画效果

  • 语法:

    • transition-property:指定要执行过渡的属性
      • 可以同时指定多个属性,用逗号隔开
      • 如果所有属性都需要过渡,使用all关键字
      • 大部分属性都支持过渡效果
      • 过渡时必须从一个有效数值向另一个有效数值进行过渡(auto不算有效数值)
    • transition-duration:指定过渡效果的持续时间
    • transition-delay:延迟过渡效果,等待一段时间后再执行过渡
    • transition-timing-function:过度的时序函数
      • linear 匀速运动
      • ease 默认值,慢速开始,先加速后减速
      • ease-in 加速运动
      • ease-out 减速运动
      • ease-in-out 先加速后减速
      • cubic-bezier() 指定时序函数
      • steps() 分布执行过渡效果,可以设置第二个值:
        • end 在时间结束时执行过渡
        • start 在时间开始时执行过渡
    • transition:同时设置过渡相关的所有属性,无顺序要求
程序员灯塔
转载请注明原文链接:CSS笔记 - 09 过渡
喜欢 (0)