<progress id="zl1bp"></progress>
<menuitem id="zl1bp"><i id="zl1bp"><video id="zl1bp"></video></i></menuitem><cite id="zl1bp"></cite>
<var id="zl1bp"><strike id="zl1bp"><listing id="zl1bp"></listing></strike></var>
<menuitem id="zl1bp"></menuitem>
<var id="zl1bp"></var>
<var id="zl1bp"><strike id="zl1bp"></strike></var>
<var id="zl1bp"><video id="zl1bp"></video></var><cite id="zl1bp"><video id="zl1bp"><listing id="zl1bp"></listing></video></cite>
<var id="zl1bp"></var><var id="zl1bp"><strike id="zl1bp"></strike></var>
<var id="zl1bp"><strike id="zl1bp"><listing id="zl1bp"></listing></strike></var><var id="zl1bp"></var><cite id="zl1bp"><video id="zl1bp"><listing id="zl1bp"></listing></video></cite>
2HZZ國外網址導航喜歡加入收藏
當前位置:國外網 » 站長資訊 » 編程 » 文章詳細
transition 屬性CSS

發布時間:2021-10-23,來源:2HZZ外國網址導航

transition 屬性CSS中CSS transition 屬性transform-style transition-delay實例把鼠標指針放到 div 元素上,其寬度會從 100px 逐漸變為 300px:


div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
親自試一試
瀏覽器支持
表格中的數字注明了完全支持該屬性的首個瀏覽器版本。


帶 -webkit-、-moz- 或 -o- 的數字表示使用前綴的首個版本。


屬性 Chrome IE Firefox Safari Opera
transition 26.0
4.0 -webkit- 10.0 16.0
4.0 -moz- 6.1
3.1 -webkit- 12.1
10.5 -o-
定義和用法
transition 屬性是一個簡寫屬性,用于設置四個過渡屬性:


transition-property
transition-duration
transition-timing-function
transition-delay
注釋:請始終設置 transition-duration 屬性,否則時長為 0,就不會產生過渡效果。


默認值: all 0 ease 0
繼承性: no
版本: CSS3
JavaScript 語法: object.style.transition="width 2s"
語法
transition: property duration timing-function delay;
描述
transition-property 規定設置過渡效果的 CSS 屬性的名稱。
transition-duration 規定完成過渡效果需要多少秒或毫秒。
transition-timing-function 規定速度效果的速度曲線。
transition-delay 定義過渡效果何時開始。