24.transition实现动画效果

transiton定义

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

• transition-property：指定应用过渡属性

  • 可以写all表示所有可动画的属性
  • 属性是否支持动画查看文档

• transition-duration：指定过渡动画所需的时间

  • 单位可以是秒（s）或毫秒（ms）

• transition-timing-function：指定动画的变化曲线

  • linear 匀速
  • ease 慢速开始，然后变快，然后慢速结束
  • ease-out 以慢速结束的过渡效果
  • ease-in-out 以慢速开始，加速到一定值，开始减速
  • cubic-bezier(n,n,n,n)
  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function
• transition-delay：指定过渡动画执行之前的等待时间

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果，比如:hover、:active 或者通过 JavaScript 实现的状态变化。