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