CSS3过渡
- 允许css的属性值在一定的时间内平滑地过渡
- 在鼠标单击、获取焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
transition
transition-property属性检索或设置对象中的参与过渡的属性
语法
transition-property:none|all|property
参数说明
- none 没有属性改变
- all 默认值
- property 元素属性名
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{background: #abcdef} div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background} div:hover{cursor: pointer;background: red;transition-property:background } </style> </head> <body> <div></div> </body> </html>
鼠标经过方块变红，离开后恢复正常
transition-duration属性检索设置对象过渡的持续时间
语法
transition-duration:time;
参数说明
- 规定完成过渡效果需要花费的时间（以秒或毫秒计）
- 默认值是0
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{background: #abcdef} div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background;transition-duration: 3s} div:hover{cursor: pointer;background: red;transition-property:background;transition-duration: 3s } </style> </head> <body> <div></div> </body> </html>
transition-timing-function 检索或设置对象中过渡的动画类型
- linear 线性过渡
- ease 平滑过渡
- ease-in 由慢到快
- ease-out 由快到慢
- ease-in-out 由慢到快在到慢
- step-start
- step-end
transition-delay属性检索或设置对象延迟过渡的时间
语法 transition-delay:time
参数说明
- 指定秒或毫秒之前要等待切换效果开始
- 默认值 0