CSS笔记 - 过渡

过渡

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

• 语法：

  • 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：同时设置过渡相关的所有属性，无顺序要求