过渡

  • 过渡 transition

    • 通过过渡可以指定一个属性发生变化时的切换方式
    • 通过过渡可以创建一些非常好的效果，提升用户体验
    • 属性
      • transition-property指定要执行过渡的属性
        • 多个属性间用，隔开
        • 所有属性用all
        • 只要是可计算的值都可以过渡，必须是从一个有效值向另一个有效值过渡，不能从auto过渡
      • transition-duration指定过渡要执行的时间
        • 单位s或ms
        • 也可以用，隔开分别指定时间
      • transition-timing-function过渡的时序函数，指定过渡的执行方式
        • 可选值
          • 默认值ease，慢速开始，先加速再减速
          • linear匀速运动
          • ease-in加速运动
          • ease-out减速运动
          • ease-in-out先加速后减速
          • cubic-bezier（）来指定时序函数。通过网站查询特定的轨迹
          • step（）
      • transition-delay设置过渡效果的延迟
      • transition 同时设置过渡相关的所有属性，没有顺序要求，但持续时间要在延迟时间之前

  • 过渡练习

    • 通过背景图片
    • 设置背景位置的过渡
    • 用steps

      动画

  • 动画animation

    • 动画和过渡类似，都是实现一些动态的效果。不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果
    • 设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤
      • @keywords test{ from{} to{} }
    • 属性与transition同。
    • 还有其他的比如执行次数