过渡和动画

过渡 Transition

• 可以指定一个属性发生变化时的切换方式；

属性值：

• transition-property ：指定要执行过渡的属性：

  • 多个属性间使用 , 隔开；

  • 如果所有属性都需要过渡，则使用 all 关键字；

  • 大部分属性都支持过渡效果；

  • 注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡；

• transition-duration ：指定过渡效果的持续时间：

  • 时间单位：s 和 ms（1 s = 1000 ms）；

• transition-delay ：过渡效果的延迟时间；

• transition-timing-function ：过渡的时序函数：

  • linear 线性匀速运动

  • ease 默认值，慢速开始，先加速后减速

  • ease-in 加速运动

  • ease-out 减速运动

  • ease-in-out 先加速后减速

  • cubic-bezier() 来指定时序函数 https://cubic-bezier.com

  • steps() 分步执行过渡效果，可以设置第二个值：

  • • end ，在时间结束时执行过渡（默认值）
  • • start ，在时间开始时执行过渡

• transition ：可以同时设置过渡相关的所有属性：

  • 添加延迟，则两个时间中第一个是持续时间，第二个是延迟时间；

动画 Animation

动画和过渡类似，都是可以实现一些动态的效果，不同的是：

• 过渡需要在某个属性发生变化时才会触发；
• 动画可以自动触发动态效果；

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤：

@keyframes test {    
  from {
    margin-left: 0; 
  }    
  to {
    margin-left: 900px;
  }
}

属性值：

• animation-name ：指定动画的关键帧名称；

• animation-duration ：指定动画效果的持续时间；

• animation-delay ：动画效果的延迟，等待一段时间后在执行动画；

• animation-timing-function ：动画的时序函数；

• animation-iteration-count ： 动画执行的次数；

  • infinite 无限次执行；

• animation-direction ：指定动画运行的方向：

  • normal 从 from 向 to 运行， 每次执行；

  • reverse 从 to 向 from 运行，每次执行；

  • alternate 从 from 向 to 运行： 重复执行动画时反向执行；

  • alternate-reverse 从 to 向 from 运行，重复执行动画时反向执行；

• animation-play-state ：设置动画的执行状态：

  • running 动画执行，默认值

  • paused 动画暂停

• animation-fill-mode ：动画的填充模式。指定了在动画结束时元素的样式。

  • none 动画执行完毕，元素回到原来位置，默认值

  • forwards 动画执行完毕，元素会停止在动画结束的位置

  • backwards 动画延时等待时，元素就会处于开始位置

  • both 结合了 forwards 和 backwards