在线文档教程
CSS

过渡时间 | transition-duration

过渡时期

transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ,表示不出现过渡动画。

可以指定多个时长,每个时长会被应用到由 transition-property指定的对应属性上。如果指定的时长个数小于属性个数,那么时长列表会重复。如果时长列表更长,那么该列表会被裁减。两种情况下,属性列表都保持不变。

/* <time> values */ transition-duration: 6s; transition-duration: 120ms; transition-duration: 1s, 15s; transition-duration: 10s, 30s, 230ms; /* Global values */ transition-duration: inherit; transition-duration: initial; transition-duration: unset;

初始值0s
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性no
适用媒体interactive
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

<time><time>类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ,表示不会呈现过渡动画,属性会瞬间完成转变。不接受负值。

形式语法

<time>#

示例

transition-duration: 0.5s

<div class="parent"> <div class="box">Lorem</div> </div>

.parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg -webkit-transform: rotate(270deg width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration:0.5s; transition-timing-function: ease-in-out; }

function updateTransition() { var el = document.querySelector("div.box" if (el) { el.className = "box1"; } else { el = document.querySelector("div.box1" el.className = "box"; } return el; } var intervalID = window.setInterval(updateTransition, 7000

transition-duration: 1s

<div class="parent"> <div class="box">Lorem</div> </div>

.parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform color; transition-duration:1s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg -webkit-transform: rotate(270deg width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:1s; transition-timing-function: ease-in-out; }

function updateTransition() { var el = document.querySelector("div.box" if (el) { el.className = "box1"; } else { el = document.querySelector("div.box1" el.className = "box"; } return el; } var intervalID = window.setInterval(updateTransition, 7000

transition-duration: 2s

<div class="parent"> <div class="box">Lorem</div> </div>

.parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:2s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:2s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg -webkit-transform: rotate(270deg width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:2s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:2s; transition-timing-function: ease-in-out; }

function updateTransition() { var el = document.querySelector("div.box" if (el) { el.className = "box1"; } else { el = document.querySelector("div.box1" el.className = "box"; } return el; } var intervalID = window.setInterval(updateTransition, 7000

transition-duration: 4s

<div class="parent"> <div class="box">Lorem</div> </div>

.parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:4s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg -webkit-transform: rotate(270deg width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:4s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:4s; transition-timing-function: ease-in-out; }

function updateTransition() { var el = document.querySelector("div.box" if (el) { el.className = "box1"; } else { el = document.querySelector("div.box1" el.className = "box"; } return el; } var intervalID = window.setInterval(updateTransition, 7000

规范

SpecificationStatusComment
CSS TransitionsThe definition of 'transition-duration' in that specification.Working DraftInitial definition

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0 -webkit (Yes)(Yes)-webkit (Yes)4.0 (2.0) -moz 16.0 (16.0)110.011.6 -o 12.10 #3.0 -webkit

FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1 -webkit(Yes)-webkit (Yes)4.0 (2.0) -moz 16.0 (16.0)1?10.0 -o 12.10 #3.2 -webkit

除了支持无前缀外,Gecko 44.0(Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41)还增加了对该属性的-webkit前缀版本的支持,以解决layout.css.prefixes.webkit首选项(默认为false)的Web兼容性问题,因为Gecko 49.0(Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46),首选项默认为true