4-7、CSS3过渡
过渡(Transition)
- 允许CSS的属性值在一定的时间区间内平滑地过渡
- 在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
transition-property
属性
检索或设置对象中的参与过渡的属性。
transition-property : none | all | property;
none(没有属性改变)
all(所有属性改变),默认值
property(元素属性名)
例子:transition-property : color;
transition-duration
属性
检索或设置对象过渡的持续时间。
语法
transition-duration:time;
参数说明
-规定完成过渡效果需要花费的时间(以秒或毫秒计)
-默认值是0
transition-duration : 2s;
transition-timing-function
属性
检索或设置对象中过渡的动画类型。
transition-timing-function : ease-out;
transition-delay
属性
-检索或设置对象延迟过渡的时间
语法
transition-delay:time;
参数说明
-指定秒或毫秒数之前要等待切换效果开始
-默认值为0
transition
简写,顺序千万不能错。
一定要有事件的发生,点击、经过等等等等。