4-7、CSS3过渡

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 简写，顺序千万不能错。


一定要有事件的发生，点击、经过等等等等。