Transition 动画
知有
179
Transition 动画
它通过 transition 属性来指定。transition 属性的值包括如下部分。
- transition-property: 指定对 HTML元素的哪个 CSS 属性进行平滑渐变处理。该属性可以指定 background-color、width、height等各种标准的 CSS 属性。
- transition-duration: 指定属性平滑渐变的待续时间。
- transition-delay: 指定延迟时间，也就是指定经过多长时间的延迟才会开始执行平滑渐变。
- transition-timing-function: 指定渐变的速度。该部分支持如下几个值。
- ease: 动画开始时较慢，然后速度加快，到达最大速度后再减慢速度。
- linear: 线性速度。动画开始时的速度到结束时的速度保待不变。
- ease-in: 动画开始时速度较慢，然后速度加快。
- ease-out: 动画开始时速度很快，然后速度减慢。
- ease-in-out: 动画开始时速度较慢，然后速度加快，到达最大速度后再减慢速度。
- cubic-bezier(x1, y1, x2, y2) ：通过贝济埃曲线来控制动画的速度 。该属性值完全可以代替 ease linear ease-in ease-out ease-in-out 等属性值。
transition属性可以同时指定多组 property duration time-function delay 值，每组 property、duration、time-function、delay值控制 个属性值的渐变效果。