过渡
- 概念
允许CSS属性值在一定的时间区间内平滑地过渡,在鼠标点击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。 - 兼容性
IE10+、Firefox16+、Chrome26+、Safari6.1+、Opera12.1+
transition-property属性
- 概念
检索或设置元素中的参与过渡的属性。 - 属性值
属性值 | 描述 |
---|---|
none | 没有属性改变 |
all | 默认值,所有属性改变 |
property | 元素属性名 |
transition-duration属性
- 概念
检索或设置对象过渡的持续时间。 - 语法
transition-duration:time;(默认值是0,单位为毫秒或秒)
transition-timing-function属性
- 概念
检索或设置对象中过渡的动画类型 - 属性值
属性值 | 描述 |
---|---|
linear | 线性过渡,等同于贝塞尔曲线(0.0,0.0,1.0,1.0) |
ease | 平滑过渡,等同于贝塞尔曲线(0.25,0.1,0.25,1.0) |
ease-in | 由慢到块,等同于贝塞尔曲线(0.42,0,1.0,1.0) |
ease-out | 由快到慢,等同于贝塞尔曲线(0,0,0.58,1.0) |
ease-in-out | 由慢到快再到慢,等同于贝塞斯曲线(0.42,0,0.58,1.0) |
transition-delay属性
- 概念
检索或设置对象延迟过渡的时间。 - 语法
transition-delay:time;(默认值为0,单位为毫秒或秒)
transition属性缩写
- 语法
transition:property duration timing-function delay;(顺序不能更改)