?
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
?
)
