mozilla

版本 377617 / 使用 CSS 过渡

  • 版本网址缩略名: CSS/Tutorials/Using_CSS_transitions
  • 版本标题: 使用CSS过渡
  • 版本 id: 377617
  • 创建于:
  • 创建者: yan
  • 是否是当前版本?
  • 评论

修订内容

CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制CSS属性的改变速度。 你可以让属性的改变过程持续一段时间,而不是立即生效。比如,你将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用transition后, 改变过程加速曲线changes occur at time intervals that follow an acceleration curve, all of which can be customized.

Animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser.

A CSS transition tells the browsder to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

通过transition你可以决定哪个属性发生动画效果 (通过明确地列出这些属性),何时开始动画 (通过设置delay), 动画持续多久 (通过设置duration), 以及如何动画 (通过定义timing函数,比如线性地或开始快结尾慢)。

Note: transition可以不用厂商前缀,不过鉴于标准刚刚稳定,对于基于Webkit的浏览器厂商前缀仍然必需。如果想兼容旧版本浏览器那么也需要厂商前缀(例如Firefox 15-, Opera 12-)。更多信息见本页底部的兼容性表格。

哪些CSS属性可动画?

网页制作者可以定义哪个属性以某种方式动画。. This allows the creation of complex transitions. As it doesn't make sense to animate some properties, the list of animatable properties is limited to a finite set.

Note: 可动画的属性集将有改动,开发者应该关注事情进展。

Also the auto value is often a very complex case. The specification asks not to animate from and to such a value. Some user agents, like those based on Gecko, implement this requirement and others, like those based on WebKit, are less strict. Using animations with auto may lead to unpredictable results, depending of the browser and its version, and should be avoided.

Care should also be taken when using a transition immediately after adding the element to the DOM using .appendChild() or removing its display: none; property. This is seen as if the initial state had never occured and the element was always in its final state. The easy way to overcome this limitation is to apply a window.setTimeout() of a handful of milliseconds before changing the CSS property you intend to transition to.

Multiple animated properties example

HTML Content

<body>
    <p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p>
    <div class="box"></div>
</body>

CSS Content

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    -o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
}

{{ EmbedLiveSample('Multiple_animated_properties_example', 600, 300) }}

CSS properties used to define transitions

CSS Transitions are controlled using the shorthand {{cssxref("transition")}} property. This is the best way to configure transitions, as it makes it easier to avoid that the lengths of the parameter list are out of sync, which can be very frustrating to have to spend lots of time debugging the CSS.

You can control the individual components of the transition with the following sub-properties:

(Note that these transitions loop infinitely only for the purpose of our examples; CSS transitions only visualize a property change from start to finish. If you need visualizations that loop, look into the CSS animation property.)

{{ cssxref("transition-property") }}
Specifies the name or names of the CSS properties to which transitions should be applied. Only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual.
{{ cssxref("transition-duration") }}
Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of 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);
{{EmbedLiveSample("duration_0_5s",275,150)}}

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);
{{EmbedLiveSample("duration_1s",275,150)}}

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);
{{EmbedLiveSample("duration_2s",275,150)}}

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);
{{EmbedLiveSample("duration_4s",275,150)}}
{{ cssxref("transition-timing-function") }}
Specifies a function to define how intermediate values for properties are computed. Timing functions determine how intermediate values of the transition are calculated. Most timing functions can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier. You can also choose easing from Easing Functions Cheat Sheet.

transition-timing-function: ease

 <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 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;
}
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);
{{EmbedLiveSample("ttf_ease",275,150)}}

transition-timing-function: linear

 <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 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;
}
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);
{{EmbedLiveSample("ttf_linear",275,150)}}

transition-timing-function: step-end

 <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 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;
}
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);
{{EmbedLiveSample("ttf_stepend",275,150)}}

transition-timing-function: steps(4, end)

 <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 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);
}
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);
{{EmbedLiveSample("ttf_step4end",275,150)}}
{{ cssxref("transition-delay") }}
Defines how long to wait between the time a property is changed and the transition actually begins.

transition-delay: 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 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;
}
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);
{{EmbedLiveSample("delay_0_5s",275,150)}}

transition-delay: 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 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;
}
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);
{{EmbedLiveSample("delay_1s",275,150)}}

transition-delay: 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 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;
}
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);
{{EmbedLiveSample("delay_2s",275,150)}}

transition-delay: 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 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;
}
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);
{{EmbedLiveSample("delay_4s",275,150)}}

The shorthand CSS syntax is written as follows:

div {
    transition: <property> <duration> <timing-function> <delay>;
}

Detecting the completion of a transition

There is a single event that is fired when transitions complete. In all standard-compliant browser, the event is transitionend, in WebKit it is webkitTransitionEnd. See the compatibility table at the bottom for more. The transitionend event offers two properties:

propertyName
A string indicating the name of the CSS property whose transition completed.
elapsedTime
A float indicating the number of seconds the transition had been running at the time the event fired. This value isn't affected by the value of {{ cssxref("transition-delay") }}.

As usual, you can use the {{ domxref("element.addEventListener()") }} method to monitor for this event:

el.addEventListener("transitionend", updateTransition, true);
Note: 当transition取消后 transitionend 事件不会发生,因为属性值变化 the animating property's value is changed before the transition is completed.

属性与值的列表长度不一致

如果值列表长度短于属性列表长度,则重复值以使两者长度一致, 例如:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

结果为:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

类似地,如果值列表长于{{ cssxref("transition-property") }}列表,值列表将被截断。所以如果有下面CSS:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

结果为:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

简单例子

这个例子实现这样的效果:4s 字体大小,2s transition with a two-second delay between the time the user mouses over the element and the beginning of the animation effect:

#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;
}

在高亮菜单时使用 transition

CSS的一个常用地方是当鼠标停在菜单上时高亮此菜单。使用transition轻易地做到引人注目。

阅读代码前, 你可能想看演示 (假定你的浏览器支持transition)。你也可以看看 这个

菜单HTML:

<div class="sidebar">
  <p><a class="menuButton" href="home">Home</a></p>
  <p><a class="menuButton" href="about">About</a></p>
  <p><a class="menuButton" href="contact">Contact Us</a></p>
  <p><a class="menuButton" href="links">Links</a></p>
</div>

菜单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;
}

这个 CSS 设定了菜单的外观,在{{ cssxref(":hover") }}时,菜单里面的元素的文字颜色及背景色都变化。

与其废舌描述,不如你自己去看示例 (前提是你的 浏览器支持transition)。

使用transition让JavaScript效果平滑

transition是非常好的工具,让JavaScript效果平滑而不用动JavaScript。 看下面例子。

<p>随便点击某处来移动球</p>
<div id="foo"></div>

使用 JavaScript 将球移动到一个位置 :

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);

使用CSS 来平滑移动,只用简单地添加一个过渡 :

p {
  padding-left: 60px;

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

演示: http://jsfiddle.net/RwtHn/5/

Specifications

Specification Status Comment
{{ SpecName('CSS3 Transitions', '', '') }} {{ Spec2('CSS3 Transitions') }} Initial specification.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ property_prefix("-webkit") }}
26.0
{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}
{{ CompatGeckoDesktop("16.0") }}
10 10.5 {{ property_prefix("-o") }}
12.10
3.2 {{ property_prefix("-webkit") }}
transitionend event 1.0 as webkitTransitionEnd
26.0
{{ CompatGeckoDesktop("2.0") }} 10 10.5 as oTransitionEnd
12 as otransitionend
12.10 as transitionend
3.2 as webkitTransitionEnd
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 {{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}
{{ CompatGeckoMobile("16.0") }}
{{ CompatUnknown() }} 10 {{ property_prefix("-o") }}
12.10
3.2
transitionend event 2.1 as webkitTransitionEnd {{ CompatGeckoMobile("2.0") }} {{ CompatUnknown() }} 10 as oTransitionEnd
12 as otransitionend
12.10 as transitionend
3.2 as webkitTransitionEnd

See also

  • CSS3 Dock Menu using CSS transitions
  • The {{ domxref("TransitionEvent") }} interface and the transitionend event.
  • {{ CSS_Reference:Transitions() }}

修订版来源

<p><strong>CSS 过渡(transition)</strong>, 是 <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a> 规范的一部分, 用来控制CSS属性的改变速度。 你可以让属性的改变过程持续一段时间,而不是立即生效。比如,你将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用transition后, 改变过程加速曲线changes occur at time intervals that follow an acceleration curve, all of which can be customized.</p>
<p>Animations that involve transitioning between two states are often called <em>implicit transitions</em> as the states in between the start and final states are implicitly defined by the browser.</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="width: 680px; height: 196px;display:block;margin:auto;" /></p>
<p>通过transition你可以决定哪个属性发生动画效果 (<em>通过明确地列出这些属性</em>),何时开始动画 (<em>通过设置delay)</em>, 动画持续多久 (<em>通过设置duration</em>), 以及如何动画 (通过定义<em>timing函数</em>,比如线性地或开始快结尾慢)。</p>
<div class="note">
  <strong>Note:</strong> transition可以不用厂商前缀,不过鉴于标准刚刚稳定,对于基于Webkit的浏览器厂商前缀仍然必需。如果想兼容旧版本浏览器那么也需要厂商前缀(例如Firefox 15-, Opera 12-)。更多信息见本页底部的兼容性表格。</div>
<h2 id="Which_CSS_properties_are_animatable.3F">哪些CSS属性可动画?</h2>
<p>网页制作者可以定义哪个属性以某种方式动画。. This allows the creation of complex transitions. As it doesn't make sense to animate some properties, the <a href="/en-US/docs/CSS/CSS_animated_properties" title="/en-US/docs/">list of animatable properties</a> is limited to a finite set.</p>
<div class="note">
  Note: 可动画的属性集将有改动,开发者应该关注事情进展。</div>
<p class="note">Also the auto value is often a very complex case. The specification asks not to animate from and to such a value. Some user agents, like those based on Gecko, implement this requirement and others, like those based on WebKit, are less strict. Using animations with <code>auto</code>&nbsp;may lead to unpredictable results, depending of the browser and its version, and should be avoided.</p>
<p class="note">Care should also be taken when using a transition immediately after adding the element to the DOM using&nbsp;<code>.appendChild()</code> or removing its&nbsp;<code>display: none;&nbsp;</code>property. This is seen as if the initial state had never occured and the element was always in its final state. The easy way to overcome this limitation is to apply a&nbsp;<code>window.setTimeout()</code> of a handful of milliseconds before changing the CSS property you intend to transition to.</p>
<h3 id="Multiple_animated_properties_example">Multiple animated properties example</h3>
<h4 id="HTML_Content">HTML Content</h4>
<pre class="brush: html; highlight:[3]">
&lt;body&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.&lt;/p&gt;
&nbsp;&nbsp;&nbsp; &lt;div class="box"&gt;&lt;/div&gt;
&lt;/body&gt;</pre>
<h4 id="CSS_Content">CSS Content</h4>
<pre class="brush: css; highlight:[8,9,10,11,17,18,19,20]">
.box {
&nbsp;&nbsp;&nbsp; border-style: solid;
&nbsp;&nbsp;&nbsp; border-width: 1px;
&nbsp;&nbsp;&nbsp; display: block;
&nbsp;&nbsp;&nbsp; width: 100px;
&nbsp;&nbsp;&nbsp; height: 100px;
&nbsp;&nbsp;&nbsp; background-color: #0000FF;
&nbsp;&nbsp;&nbsp; -moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
&nbsp;&nbsp;&nbsp; -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
&nbsp;&nbsp;&nbsp; -o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
&nbsp;&nbsp;&nbsp; transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
&nbsp;&nbsp;&nbsp; background-color: #FFCCCC;
&nbsp;&nbsp;&nbsp; width:200px;
&nbsp;&nbsp;&nbsp; height:200px;
&nbsp;&nbsp;&nbsp; -moz-transform:rotate(180deg);
&nbsp;&nbsp;&nbsp; -webkit-transform:rotate(180deg);
&nbsp;&nbsp;&nbsp; -o-transform:rotate(180deg);
&nbsp;&nbsp;&nbsp; transform:rotate(180deg);
}

</pre>
<p>{{ EmbedLiveSample('Multiple_animated_properties_example', 600, 300) }}</p>
<h2 id="CSS_properties_used_to_define_transitions">CSS properties used to define transitions</h2>
<p>CSS Transitions are controlled using the shorthand<a href="https://developer.mozilla.org/en-US/docs/CSS/transition" title="https://developer.mozilla.org/en-US/docs/CSS/transition"> </a>{{cssxref("transition")}} property. This is the best way to configure transitions, as it makes it easier to avoid that the lengths of the parameter list are out of sync, which can be very frustrating to have to spend lots of time debugging the CSS.</p>
<p>You can control the individual components of the transition with the following sub-properties:</p>
<p><strong>(Note that these transitions loop infinitely only for the purpose of our examples; CSS <code>transition</code>s only visualize a property change from start to finish. If you need visualizations that loop, look into the CSS <a href="/en-US/docs/CSS/animation" title="/en-US/docs/CSS/animation"><code>animation</code></a> property.)</strong></p>
<dl>
  <dt>
    {{ cssxref("transition-property") }}</dt>
  <dd>
    Specifies the name or names of the CSS&nbsp;properties to which transitions should be applied. Only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual.</dd>
  <dt>
    {{ cssxref("transition-duration") }}</dt>
  <dd>
    Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time.
    <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 style="display:none">
          <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 style="display:none">
          <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 style="display:none">
          <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 style="display:none">
          <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="width: 130px; height: 173px; float: left; margin-right:5px;" />Specifies a function to define how intermediate values for properties are computed. <em>Timing functions</em> determine how intermediate values of the transition are calculated. Most <a href="/en-US/docs/CSS/timing-function" title="/en-US/docs/CSS/timing-function">timing functions</a> can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier. You can also choose easing from&nbsp;<a href="http://easings.net/" title="http://easings.net/">Easing Functions Cheat Sheet</a>.
    <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 style="display:none">
          <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 style="display:none">
          <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 style="display:none">
          <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 style="display:none">
          <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>
    Defines how long to wait between the time a property is changed and the transition actually begins.
    <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 style="display:none">
          <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 style="display:none">
          <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 style="display:none">
          <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 style="display:none">
          <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>The shorthand CSS syntax is written as follows:</p>
<pre class="brush:css;">
div {
    transition: &lt;property&gt; &lt;duration&gt; &lt;timing-function&gt; &lt;delay&gt;;
}</pre>
<h2 id="Detecting_the_completion_of_a_transition">Detecting the completion of a transition</h2>
<p>There is a single event that is fired when transitions complete. In all standard-compliant browser, the event is <code>transitionend</code>, in WebKit it is <code>webkitTransitionEnd</code>. See the compatibility table at the bottom for more.&nbsp;The <code>transitionend</code>&nbsp;event offers two properties:</p>
<dl>
  <dt>
    <code>propertyName</code></dt>
  <dd>
    A string indicating the name of the CSS property whose transition completed.</dd>
  <dt>
    <code>elapsedTime</code></dt>
  <dd>
    A float indicating the number of seconds the transition had been running at the time the event fired. This value isn't affected by the value of {{ cssxref("transition-delay") }}.</dd>
</dl>
<p>As usual, you can use the {{ domxref("element.addEventListener()") }} method to monitor for this event:</p>
<pre class="brush: js">
el.addEventListener("transitionend", updateTransition, true);
</pre>
<div class="note">
  <strong>Note:</strong> 当transition取消后 <code>transitionend</code> 事件不会发生,因为属性值变化 the animating property's value is changed before the transition is completed.</div>
<h2 id="When_property_value_lists_are_of_different_lengths">属性与值的列表长度不一致</h2>
<p>如果值列表长度短于属性列表长度,则重复值以使两者长度一致, 例如:</p>
<pre class="brush: css">
div {
&nbsp; transition-property:&nbsp;opacity, left, top, height;
&nbsp; transition-duration: 3s, 5s;
}
</pre>
<p>结果为:</p>
<pre class="brush: css">
div {
&nbsp; transition-property:&nbsp;opacity, left, top, height;
&nbsp; transition-duration: 3s, 5s, 3s, 5s;
}</pre>
<p>类似地,如果值列表长于{{ cssxref("transition-property") }}列表,值列表将被截断。所以如果有下面CSS:</p>
<pre class="brush: css">
div {
&nbsp; transition-property:&nbsp;opacity, left;
&nbsp; transition-duration: 3s, 5s, 2s, 1s;
}</pre>
<p>结果为:</p>
<pre class="brush: css">
div {
&nbsp; transition-property:&nbsp;opacity, left;
&nbsp; transition-duration: 3s, 5s;
}</pre>
<h2 id="A_simple_example">简单例子</h2>
<p>这个例子实现这样的效果:4s 字体大小,2s transition with a two-second delay between the time the user mouses over the element and the beginning of the animation effect:</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="Using_transitions_when_highlighting_menus">在高亮菜单时使用 transition</h2>
<p>CSS的一个常用地方是当鼠标停在菜单上时高亮此菜单。使用transition轻易地做到引人注目。</p>
<p>阅读代码前, 你可能想看<a class="external" href="/samples/cssref/transitions/sample2" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/">演示</a> (假定你的浏览器支持transition)。你也可以看看 <a class="external" href="/samples/cssref/transitions/sample2/transitions.css" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/transitions.css">这个</a>。</p>
<p>菜单HTML:</p>
<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>
<p>菜单CSS:</p>
<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>这个 CSS 设定了菜单的外观,在{{ cssxref(":hover") }}时,菜单里面的元素的文字颜色及背景色都变化。</p>
<p>与其废舌描述,不如你自己去看<a href="/samples/cssref/transitions/sample2" title="https://developer.mozilla.org/samples/cssref/transitions/sample2">示例</a> (前提是你的 <a class="external" href="/en/CSS/CSS_transitions#Browser_compatibility" title="en/CSS/CSS_transitions#Browser_compatibility">浏览器支持transition</a>)。</p>
<h2 id="Using_transitions_to_make_JavaScript_functionality_smooth">使用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/" title="http://jsfiddle.net/RwtHn/5/">http://jsfiddle.net/RwtHn/5/</a></p>
<h2 id="Specifications">Specifications</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="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <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 as <code>webkitTransitionEnd</code><br />
          26.0</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>10</td>
        <td>10.5 as <code>oTransitionEnd</code><br />
          12 as <code>otransitionend</code><br />
          12.10 as <code>transitionend</code></td>
        <td>3.2 as <code>webkitTransitionEnd</code></td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;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>{{ CompatUnknown() }}</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 as <code>webkitTransitionEnd</code></td>
        <td>{{ CompatGeckoMobile("2.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>10 as <code>oTransitionEnd</code><br />
          12 as <code>otransitionend</code><br />
          12.10 as <code>transitionend</code></td>
        <td>3.2 as <code>webkitTransitionEnd</code></td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</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>
  <li>{{ CSS_Reference:Transitions() }}</li>
</ul>
恢复到这个版本