CSS transition 的默认值
CSS transition 的默认值
语法
transition: property duration timing-function delay|initial|inherit;
示例:
div {
width: 100px;
height: 100px;
transition: width 2s;
}
div:hover {
width: 300px;
}
CSS transition 演示
同时指定多个属性
也可同时指定多个需要 transition
的属性,每个属性用逗号分隔,包含自己完整的时间,动画方法(timing function)的指定。
div {
width: 100px;
height: 100px;
transition: width,height 2s;
}
div:hover {
width: 300px;
height: 300px;
}
CSS transition 同时作用于多个属性
上面 width
只指定了属性,未指定时间及动画方法,所以动作的变化发是在瞬时完成的。
默认值
transition: all 0s ease 0s
意味着浏览器对所有元素所有属性设置了 transitoin 但时长为 0。
所以实际使用中,只需要设置元素的 transition-duration
即可让 transition
生效。
div {
width: 100px;
height: 100px;
- transition: width,height 2s;
+ transition-duration: 2s;
}
div:hover {
width: 300px;
height: 300px;
}
CSS transition 的默认值