transition-duration,計算機函式語言,用於檢索或設定對象過渡的持續時間。
簡介,示例,
簡介
transition-duration
語法:
transition-duration:[ , ]*
默認值:0
取值:
:
指定對象過渡的持續時間
說明:
檢索或設定對象過渡的持續時間。
如果提供多個屬性值,以逗號進行分隔。
對應的腳本特性為transitionDuration。
寫法:
核心類型寫法
Webkit(Chrome/Safari)-webkit-transition-duration
Gecko(Firefox)-moz-transition-duration
Presto(Opera)-o-transition-duration
Trident(IE)-ms-transition-duration
W3Ctransition-duration
示例
h1 {
font - size: 16px;
}.test {
position: absolute;
left: 8px;
width: 200px;
height: 100px;
margin: 0 5px;
padding: 10px;
border: 1px solid#ddd;
background - color: #eee;
color: #000; - moz - transition - property: left; - moz - transition - duration: .5s; - moz - transition - timing -
function: ease - in; - webkit - transition - property: left; - webkit - transition - duration: .5s; - webkit - transition - timing -
function: ease - in; - o - transition - property: left; - o - transition - duration: .5s; - o - transition - timing -
function: ease - in; - ms - transition - property: left; - ms - transition - duration: .5s; - ms - transition - timing -
function: ease - in;
transition - property: left;
transition - duration: .5s;
transition - timing -
function: ease - in;
}.test: hover {
left: 100px;
}請將滑鼠移動到下面的矩形上:矩形在0.5s內慢慢向右移動transition - duration: .5s;abc