transition动画

什么是transition动画

• transitions 提供了一种在更改 CSS 属性时控制动画速度的方法
• 可以让 CSS 属性变化成为一个持续一段时间的过程，而不是立即 生效的
• 如如将一个元素从一个位置移动到另外一个位置，默认在修改完 CSS 属性后会立即生效
• 可以通过 CSS Transition 让这个过程加上一定的动画效果，包括一定的曲线速率变化

隐式过渡

将两个状态之间的过度称为隐式过渡，因为开始与结束之间的状态由浏览器决定

CSS transition可以决定哪些行为

• 哪些属性发生动画效果
• 何时开始，设置delay
• 持续多久，设置duration
• 如何动画，定义timing function, 比如匀速地或者先快后慢

哪些CSS属性可以做动画

并不是所有的CSS属性都可以执行动画，具体支持动画的CSS属性查询

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties

transition说明以及使用

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

• transition-property 自定应用过渡属性的名称，取值
  • all 表示所有属性都执行动画
  • none 所有属性都不执行动画
  • CSS属性名称 要执行动画的CSS属性名称， 比如width, left, transform等
• transition-duration 指定过渡动画所需的时间，单位可以是 s或者ms
• transition-timing-function 指定过渡动画的变化曲线https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function
• transition-delay 指定过渡动画执行之前的等待时间