css3 動畫屬性transition
阿新 • • 發佈：2018-01-25
eas 不支持 一個 曲線 -i bezier explore 過渡效果 過渡
transition
- Internet Explorer 9 以及更早版本的瀏覽器不支持 transition 屬性。
- Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 屬性。
- Safari 支持替代的 -webkit-transition 屬性。
transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：
| 值 | 屬性 |
|---|---|
| transition-property | 規定設置過渡效果的 CSS 屬性的名稱 |
| transition-duration | 規定完成過渡效果需要多少秒或毫秒 |
| transition-timing-function | 規定速度效果的速度曲線，主要有linear：以相同速度開始至結束的過渡效果；ease：慢速開始，然後變快，然後慢速結束的過渡效果；ease-in：以慢速開始的過渡效果；ease-out：規定以慢速結束的過渡效果；ease-in-out：規定以慢速開始和結束的過渡效果；cubic-bezier(0.42,0,0.58,1):定義自己的值,在0和1之間; |
| transition-delay | 定義過渡效果何時開始 |
可簡寫為：transition: property duration timing-function delay;
例如：
<style> .box{ width: 200px; height: 200px; background: #00f; transition: width 1s linear; } .box:hover{ width: 800px; } </style> <div class="box"></div>
css3 動畫屬性transition