path: root/files/zh-cn/web/css/css_transitions/using_css_transitions/index.html

---
title: 使用 CSS transitions
slug: Web/CSS/CSS_Transitions/Using_CSS_transitions
tags:
  - CSS
  - CSS Transitions
  - Using CSS transitions
  - 教程
  - 过渡
  - 高级
translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
---
<p>{{CSSRef}} {{SeeCompattable}}</p>

<p><strong>CSS transitions </strong>提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。</p>

<p>通常将两个状态之间的过渡称为<strong>隐式过渡（implicit transitions）</strong>，因为开始与结束之间的状态由浏览器决定。</p>

<p><img alt="A CSS transition tells the browsder to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p>

<p>CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义<em>timing function</em>，比如匀速地或先快后慢)。</p>

<div class="note"><strong>Note:</strong> transition 可以不用厂商前缀，不过鉴于标准刚刚稳定，对于基于 Webkit的浏览器仍然需要厂商前缀<span style="line-height: 1.5em;">。如果想兼容旧版本的浏览器那么也需要厂商前缀（例如Firefox 15 及之前版本, Opera 12 </span><span style="line-height: 1.5;">及之前版本</span><span style="line-height: 1.5em;">)。详情见本页底部的兼容性表格。</span></div>

<h2 id="哪些_CSS_属性可以动画">哪些 CSS 属性可以动画?</h2>

<p>网页制作者可以定义哪个属性以哪种方式动画，这样能制作出复杂的过渡。因为有些属性动画无意义，所以 <a href="/zh-CN/docs/CSS/CSS_animated_properties" title="/en-US/docs/">可动画属性列表</a> 是一个有限集合。</p>

<div class="note">Note: 可动画的属性集将有变动，开发者应关注。</div>

<p class="note">auto 值常常较复杂，规范指出不要在它上动画。一些用户代理，比如基于 Gecko 的，遵循这点；一些，比如基于 WebKit的，没有这么严格限制。在 <code>auto</code> 上动画结果可能不可预期，这取决于浏览器及其版本，应当避免使用。</p>

<p class="note">同时应当留意这种情形，在插入元素（如 <code>.appendChild()</code>）或改变属性 <code>display: none</code> 后立即使用过渡, 元素将视为没有开始状态，始终处于结束状态。简单的解决办法，改变属性前用 <code>window.setTimeout()</code> 延迟几毫秒。</p>

<h2 id="多个属性一起动画示例">多个属性一起动画示例</h2>

<h3 id="HTML_内容">HTML 内容</h3>

<pre class="brush: html">&lt;body&gt;
    &lt;p&gt;盒子的多个属性一起动画: width, height, background-color, transform. 将光标悬停在盒子上查看动画。&lt;/p&gt;
    &lt;div class="box"&gt;&lt;/div&gt;
&lt;/body&gt;</pre>

<h3 id="CSS_内容">CSS 内容</h3>

<pre class="brush: css">.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition:width 2s, height 2s,
        background-color 2s, -webkit-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}</pre>

<p>{{ EmbedLiveSample('多个属性一起动画示例', 600, 300) }}</p>

<h2 id="定义过渡">定义过渡</h2>

<p>CSS 过渡 由简写属性<a href="https://developer.mozilla.org/en-US/docs/CSS/transition" title="https://developer.mozilla.org/en-US/docs/CSS/transition"> </a>{{cssxref("transition")}} 定义是最好的方式，可以避免属性值列表长度不一，节省调试时间。</p>

<p>也可以用下面子属性来控制过渡的各部分：</p>

<p><strong>(注意下面示例中过渡无限循环是为了说明例子，<font face="Courier New, Andale Mono, monospace">过渡只是从开始到结束变化，</font>如果需要循环，查看 <a href="/en-US/docs/CSS/animation" title="/en-US/docs/CSS/animation"><code>animation</code></a> 。)</strong></p>

<dl>
 <dt>{{ cssxref("transition-property") }}</dt>
 <dd>指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。</dd>
 <dt>{{ cssxref("transition-duration") }}</dt>
 <dd>指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。
 <div>
 <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 0.5s</code></p>

 <div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css">.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;
}
</pre>

 <pre class="brush:js">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);
</pre>
 </div>

 <div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div>
 </div>

 <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 1s</code></p>

 <div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.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;
}
</pre>

 <pre class="brush:js">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);
</pre>
 </div>

 <div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
 </div>

 <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 2s</code></p>

 <div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.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;
}
</pre>

 <pre class="brush:js">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);
</pre>
 </div>

 <div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
 </div>

 <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 4s</code></p>

 <div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.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;
}
</pre>

 <pre class="brush:js">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);
</pre>
 </div>

 <div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
 </div>
 </div>
 </dd>
 <dt>{{ cssxref("transition-timing-function") }}</dt>
 <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">指定一个函数，定义属性值怎么变化。缓动函数 <em>Timing functions</em> 定义属性如何计算。多数 <a href="/en-US/docs/CSS/timing-function" title="/en-US/docs/CSS/timing-function">timing functions</a> 由四点定义一个 bezier 曲线。也可以从 <a href="http://easings.net/" style="line-height: inherit;">Easing Functions Cheat Sheet</a> 选择缓动效果。</dd>
 <dd>
 <div class="cleared">
 <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-timing-function: ease</code></p>

 <div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: ease;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: ease;
}
.box1{
    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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: ease;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: ease;
}
</pre>

 <pre class="brush:js">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);
</pre>
 </div>

 <div>{{EmbedLiveSample("ttf_ease",275,150)}}</div>
 </div>

 <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-timing-function: linear</code></p>

 <div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: linear;
}
.box1{
    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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: linear;
}
</pre>

 <pre class="brush:js">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);
</pre>
 </div>

 <div>{{EmbedLiveSample("ttf_linear",275,150)}}</div>
 </div>

 <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-timing-function: step-end</code></p>

 <div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: step-end;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: step-end;
}
.box1{
    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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: step-end;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: step-end;
}
</pre>

 <pre class="brush:js">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);
</pre>
 </div>

 <div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div>
 </div>

 <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-timing-function: steps(4, end)</code></p>

 <div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: steps(4, end);
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: steps(4, end);
}
.box1{
    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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: steps(4, end);
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: steps(4, end);
}
</pre>

 <pre class="brush:js">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);
</pre>
 </div>

 <div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div>
 </div>
 </div>
 </dd>
 <dt>{{ cssxref("transition-delay") }}</dt>
 <dd>指定延迟，即<span style="line-height: inherit;">属性开始变化时与过渡</span><span style="line-height: inherit;">开始发生时之间的时长。</span></dd>
 <dd>
 <div>
 <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 0.5s</code></p>

 <div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:0.5s;
    transition-timing-function: linear;
}
.box1{
    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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:0.5s;
    transition-timing-function: linear;
}
</pre>

 <pre class="brush:js">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);
</pre>
 </div>

 <div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div>
 </div>

 <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 1s</code></p>

 <div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:1s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:1s;
    transition-timing-function: linear;
}
.box1{
    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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:1s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:1s;
    transition-timing-function: linear;
}
</pre>

 <pre class="brush:js">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);
</pre>
 </div>

 <div>{{EmbedLiveSample("delay_1s",275,150)}}</div>
 </div>

 <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 2s</code></p>

 <div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:2s;
    transition-timing-function: linear;
}
.box1{
    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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:2s;
    transition-timing-function: linear;
}
</pre>

 <pre class="brush:js">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);
</pre>
 </div>

 <div>{{EmbedLiveSample("delay_2s",275,150)}}</div>
 </div>

 <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 4s</code></p>

 <div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:4s;
    transition-timing-function: ease-in-out;
}
.box1{
    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 color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:4s;
    transition-timing-function: ease-in-out;
}
</pre>

 <pre class="brush:js">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);
</pre>
 </div>

 <div>{{EmbedLiveSample("delay_4s",275,150)}}</div>
 </div>
 </div>
 </dd>
</dl>

<p>简写语法：</p>

<pre class="brush:css;">div {
    transition: &lt;property&gt; &lt;duration&gt; &lt;timing-function&gt; &lt;delay&gt;;
}</pre>

<h2 id="检测过渡是否完成">检测过渡是否完成</h2>

<p>当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 <code>transitionend</code>, 在 WebKit 下是 <code>webkitTransitionEnd</code>. 详情查看页面底部的兼容性表格。 <code>transitionend 事件提供两个属性</code>:</p>

<dl>
 <dt><code>propertyName</code></dt>
 <dd>字符串，指示已完成过渡的属性。</dd>
 <dt><code>elapsedTime</code></dt>
 <dd>浮点数，指示当触发这个事件时过渡已运行的时间（秒）。这个值不受 {{ cssxref("transition-delay") }} 影响。</dd>
</dl>

<p>照例可以用  {{ domxref("element.addEventListener()") }} 方法来监听这个事件：</p>

<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true);
</pre>

<div class="note"><strong>Note:</strong> 如果取消了过渡则不会触发 <code>transitionend</code> 事件，因为在过渡完成前动画的属性值改变了。</div>

<h2 id="当属性值列表长度不一致时">当属性值列表长度不一致时</h2>

<p><span style="line-height: inherit;">以 {{ cssxref("transition-property") }} 的值列表长度为标准，</span>如果某个属性值列表长度短于它的，则重复其值以长度一致， 例如:</p>

<pre class="brush: css">div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}
</pre>

<p>将按下面这样处理:</p>

<pre class="brush: css">div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}</pre>

<p>类似地，如果某个属性的值列表长于 {{ cssxref("transition-property") }} 的，将被截短。 例如:</p>

<pre class="brush: css">div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}</pre>

<p><span style="line-height: inherit;">将按下面这样处理</span>:</p>

<pre class="brush: css">div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}</pre>

<h2 id="简单例子">简单例子</h2>

<p>这个例子实现这样的效果：4s 过渡改变字体大小，2s 延迟——在元素上鼠标悬停时与开始动画效果之间：</p>

<pre class="brush: css">#delay1 {
  position: relative;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 36px;
}
</pre>

<h2 id="高亮菜单过渡效果" name="高亮菜单过渡效果">高亮菜单过渡效果</h2>

<p>CSS 的一个常用地方是当鼠标悬停在菜单上时高亮此菜单，使用 transition 效果更佳。</p>

<h3 id="HTML_内容_2">HTML 内容</h3>

<pre class="brush: html">&lt;div class="sidebar"&gt;
  &lt;p&gt;&lt;a class="menuButton" href="home"&gt;Home&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a class="menuButton" href="about"&gt;About&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a class="menuButton" href="contact"&gt;Contact Us&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a class="menuButton" href="links"&gt;Links&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;</pre>

<h3 id="CSS_内容_2">CSS 内容</h3>

<pre class="brush: css">.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  background-color:white;
  color:black;
  box-shadow: 2px 2px 1px black;
}
</pre>

<p>{{ EmbedLiveSample('高亮菜单过渡效果') }}</p>

<p>这个 CSS 设置了菜单的外观，在{{ cssxref(":hover") }}时，菜单里的元素的文字、颜色及背景色都发生了变化。</p>

<h2 id="transition_让_JavaScript_效果更平滑">transition 让 JavaScript 效果更平滑</h2>

<p>transition 是非常好的工具，可以让 JavaScript 效果平滑而不用修改 JavaScript。 看下面例子。</p>

<pre class="brush: html">&lt;p&gt;随便点击某处来移动球&lt;/p&gt;
&lt;div id="foo"&gt;&lt;/div&gt;
</pre>

<p>使用 JavaScript 将球移动到一个位置 ：</p>

<pre class="brush: js">var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
    f.style.left = (ev.clientX-25)+'px';
    f.style.top = (ev.clientY-25)+'px';
},false);
</pre>

<p>使用CSS 来平滑移动，只用简单地添加一个过渡 :</p>

<pre class="brush: css">p {
  padding-left: 60px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition:  all 1s;
}
</pre>

<p>演示： <a class="external" href="http://jsfiddle.net/RwtHn/5/">http://jsfiddle.net/RwtHn/5/</a></p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '', '') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td>Initial specification.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0 {{property_prefix("-webkit")}}<br>
    26.0</td>
   <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br>
    {{CompatGeckoDesktop("16.0")}}</td>
   <td>10</td>
   <td>10.5 {{property_prefix("-o")}}<br>
    12.10</td>
   <td>3.2 {{property_prefix("-webkit")}}</td>
  </tr>
  <tr>
   <td><code>transitionend</code> event</td>
   <td>1.0<sup>[1]</sup><br>
    26.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>10.5<sup>[2]</sup><br>
    12<br>
    12.10</td>
   <td>3.2<sup>[1]</sup><br>
    6.0</td>
  </tr>
 </tbody>
</table>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>2.1</td>
   <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br>
    {{CompatGeckoMobile("16.0")}}</td>
   <td>10</td>
   <td>10 {{property_prefix("-o")}}<br>
    12.10</td>
   <td>3.2</td>
  </tr>
  <tr>
   <td><code>transitionend</code> event</td>
   <td>2.1<sup>[1]</sup></td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>10</td>
   <td>10<sup>[2]</sup><br>
    12<br>
    12.10</td>
   <td>3.2<sup>[1]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="另见">另见</h2>

<ul>
 <li><span class="external"><a href="http://techstream.org/Web-Design/Dock-Menu-with-CSS3" title="CSS3 Dock Menu using CSS transitions">CSS3 Dock Menu</a> using CSS transitions</span></li>
 <li>The {{ domxref("TransitionEvent") }} interface and the <a href="/en-US/docs/Mozilla_event_reference/transitionend" title="The 'transitionend' event"><code>transitionend</code></a> event.</li>
</ul>