mozilla

比较版本

使用 CSS 过渡

更改版本

修订版 377617:

由 yan 在 进行的修订 377617

修订版 480941:

由 yan 在 进行的修订 480941

标题:
使用CSS过渡
使用CSS过渡
网址缩略名:
CSS/Tutorials/Using_CSS_transitions
CSS/Tutorials/Using_CSS_transitions
内容:

修订版 377617
修订版 480941
n8      <strong>CSS 过渡(transition)</strong>, 是 <a href="/en-US/docsn8      <strong>CSS 过渡(transition)</strong>, 是 <a href="/en-US/docs
>/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a> 规范的一部分, 用来控制CSS属>/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a> 规范的一部分, 用来控制 CSS
>性的改变速度。 你可以让属性的改变过程持续一段时间,而不是立即生效。比如,你将元素的颜色从白色改为黑色,通常这个改变是立即生效的,> 属性的变化速率。 你可以让属性的变化过程持续一段时间,而不是立即生效。比如,你将元素的颜色从白色改为黑色,通常这个改变是立即生效
>使用transition后, 改变过程加速曲线changes occur at time intervals that follo>的,使用 transition 后,按一个曲线变化,这个过程可以自定义。
>w an acceleration curve, all of which can be customized. 
9    </p>
10    <p>9    </p>
11      Animations that involve transitioning between two states ar10    <p>
>e often called <em>implicit transitions</em> as the states in bet 
>ween the start and final states are implicitly defined by the bro 
>wser. 
11      包含一个在两个状态间过渡的动画常称作隐式过渡&nbsp;<em>implicit transitions</em>&n
 >bsp;,因为开始与结束状态之间的状态由浏览器隐式定义。
n17      通过transition你可以决定哪属性发生动画效果 (<em>通过明确地列出这些属性</em>),何时开始动画 (n17      通过过渡你可以决定哪属性发生动画效果 (通过明确地列出这些属性),何时开始动画 (通过设置 delay<em>)</
><em>通过设置delay)</em>, 动画持续多久 (<em>通过设置duration</em>)以及如何动画 (通过定义>em>, 动画持续多久 (通过设置 duration)以及如何动画 (通过定义<em>timing函数</em>,比如线性地或开始
><em>timing函数</em>,比如线性地或开始快结尾慢)。>快结尾慢)。
n20      <strong>Note:</strong> transition可以不用厂商前缀,不过鉴于标准刚刚稳定,对于基于Wen20      <strong>Note:</strong> transition 可以不用厂商前缀,不过鉴于标准刚刚稳定,对于基于 
>bkit的浏览器厂商前缀仍然必需。如果想兼容旧版本浏览器那么也需要厂商前缀(例如Firefox 15-, Opera 12-)。>Webkit的浏览器仍然需要厂商前缀<span style="line-height: 1.5em;">。如果想兼容旧版本浏览器
>多信息见本页底部的兼容性表格。>那么也需要厂商前缀(例如Firefox 15-, Opera 12-)。详情见本页底部的兼容性表格。</span>
n22    <h2 id="Which_CSS_properties_are_animatable.3F">n22    <h2 id=".E5.93.AA.E4.BA.9BCSS.E5.B1.9E.E6.80.A7.E5.8F.AF.E5.8
 >A.A8.E7.94.BB.3F">
23      哪些CSS属性可动画?23      哪些 CSS 属性可动画?
n26      网页制作者可以定义哪个属性以某种方式动画。. This allows the creation of complex n26      网页制作者可以定义哪个属性以哪种方式动画,这样能制作出复杂的过渡。因为有些属性动画无意义,所以&nbsp;<a hre
>transitions. As it doesn't make sense to animate some properties,>f="/en-US/docs/CSS/CSS_animated_properties" title="/en-US/docs/">
> the <a href="/en-US/docs/CSS/CSS_animated_properties" title="/en>可动画属性列表</a>&nbsp;是一个有限集合。
>-US/docs/">list of animatable properties</a> is limited to a fini 
>te set. 
n29      Note: 可动画的属性集将有动,开发者应关注事情进展n29      Note: 可动画的属性集将有动,开发者应关注。
n32      Also the auto value is often a very complex case. The specin32      auto 值常常较复杂,规范指出不要在它上动画。一些用户代理,比如基于 Gecko 的,遵循这点;一些,比如基于 We
>fication asks not to animate from and to such a value. Some user >bKit的,没有这么严格限制。在&nbsp;<code>auto</code>&nbsp;上动画可能导致不可预期的结果,这取决于浏
>agents, like those based on Gecko, implement this requirement and>览器及其版本,应当避免使用。
> others, like those based on WebKit, are less strict. Using anima 
>tions with <code>auto</code>&nbsp;may lead to unpredictable resul 
>ts, depending of the browser and its version, and should be avoid 
>ed. 
n35      Care should also be taken when using a transition immediaten35      同时应该留意这种情形,在插入元素(如&nbsp;<span style="font-family: 'Courier 
>ly after adding the element to the DOM using&nbsp;<code>.appendCh>New', 'Andale Mono', monospace; line-height: inherit;">.appendChi
>ild()</code> or removing its&nbsp;<code>display: none;&nbsp;</cod>ld())</span><span style="line-height: inherit;">或改变属性&nbsp;</span
>e>property. This is seen as if the initial state had never occure>><code style="font-size: 14px; line-height: inherit;">display: no
>d and the element was always in its final state. The easy way to >ne 后立即使用过渡。这被视为没有开始状态,元素始终处于结束状态。简单的解决办法,改变属性前用</code><span style
>overcome this limitation is to apply a&nbsp;<code>window.setTimeo>="line-height: inherit;">&nbsp;</span><code style="font-size: 14p
>ut()</code> of a handful of milliseconds before changing the CSS >x; line-height: inherit;">window.setTimeout()</code><span style="
>property you intend to transition to.>line-height: inherit;">&nbsp;延迟几毫秒。</span>
n38      Multiple animated properties examplen38      多个动画属性示例
n80      CSS properties used to define transitionsn80      定义过渡的 CSS 属性
n83      CSS Transitions are controlled using the shorthand <a href=n83      CSS 过渡 由简写属性<a href="https://developer.mozilla.org/en-US/do
>"https://developer.mozilla.org/en-US/docs/CSS/transition" title=">cs/CSS/transition" title="https://developer.mozilla.org/en-US/doc
>https://developer.mozilla.org/en-US/docs/CSS/transition"></a>{{cs>s/CSS/transition">&nbsp;</a>{{cssxref("transition")}} 定义是最好的方式,可以
>sxref("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. 
84    </p>
85    <p>84    </p>
86      You can control the individual components of the transition
> with the following sub-properties: 
87    </p>85    <p>
86      也可以用下面子属性来控制过渡的各部分:
88    <p>87    </p>
89      <strong>(Note that these transitions loop infinitely only f88    <p>
>or the purpose of our examples; CSS <code>transition</code>s only 
> visualize a property change from start to finish. If you need vi 
>sualizations that loop, look into the CSS <a href="/en-US/docs/CS 
>S/animation" title="/en-US/docs/CSS/animation"><code>animation</c 
>ode></a> property.)</strong> 
89      <strong>(注意示例中过渡无限循环是为了说明例子,<font face="Courier New, Andale
 > Mono, monospace">过渡只是从开始到结束变化,</font>如果需要循环,查看&nbsp;<a href="/en
 >-US/docs/CSS/animation" title="/en-US/docs/CSS/animation"><code>a
 >nimation</code></a>&nbsp;。)</strong>
n96        Specifies the name or names of the CSS&nbsp;properties ton96        指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画,其它属性仍像通常那样瞬间变化。
> which transitions should be applied. Only properties listed here 
> are animated during transitions; changes to all other properties 
> occur instantaneously as usual. 
n102        Specifies the duration over which transitions should occun102        指定过渡的时长。或者为所有属性指定一个值,或者指定多个值,为每个属性指定不同的时长。
>r. You can specify a single duration that applies to all properti 
>es during the transition, or multiple values to allow each proper 
>ty to transition over a different period of time. 
n382        <img alt="" src="/files/3434/TF_with_output_gt_than_1.pngn382        <img alt="" src="/files/3434/TF_with_output_gt_than_1.png
>" style="width: 130px; height: 173px; float: left; margin-right:5>" style="width: 130px; height: 173px; float: left; margin-right:5
>px;">Specifies a function to define how intermediate values for p>px;">指定一个函数,定义属性值怎么变化。缓动函数&nbsp;<em>Timing functions</em>&nbsp;定义
>roperties are computed. <em>Timing functions</em> determine how i>属性如何计算。多数&nbsp;<a href="/en-US/docs/CSS/timing-function" title="/
>ntermediate values of the transition are calculated. Most <a href>en-US/docs/CSS/timing-function">timing functions</a>&nbsp;由四点定义一个
>="/en-US/docs/CSS/timing-function" title="/en-US/docs/CSS/timing-> bezier 曲线。也可以从&nbsp;<a href="http://easings.net/" style="line-he
>function">timing functions</a> can be specified by providing the >ight: inherit;" title="http://easings.net/">Easing Functions Chea
>graph of the corresponding function, as defined by four points de>t Sheet</a>&nbsp;选择缓动效果。
>fining a cubic bezier. You can also choose easing from&nbsp;<a hr 
>ef="http://easings.net/" title="http://easings.net/">Easing Funct 
>ions Cheat Sheet</a>. 
383      </dd>
384      <dd>
n654        Defines how long to wait between the time a property is cn656        指定延迟,即<span style="line-height: inherit;">属性开始变化时与过渡</spa
>hanged and the transition actually begins.>n><span style="line-height: inherit;">开始发生时之间的时长。</span>
657      </dd>
658      <dd>
n940      The shorthand CSS syntax is written as follows:n944      简写语法:
n948      Detecting the completion of a transitionn952      检测过渡是否完成
n951      There is a single event that is fired when transitions compn955      当过渡完成时触发一个事件,在符合标准的浏览器下,这个事件是&nbsp;<code>transitionend</cod
>lete. In all standard-compliant browser, the event is <code>trans>e>, 在 WebKit 下是&nbsp;<code>webkitTransitionEnd</code>. 详情查看页面底部的兼
>itionend</code>, in WebKit it is <code>webkitTransitionEnd</code>>容性表格。&nbsp;<code>transitionend 事件提供两个属性</code>:
>. See the compatibility table at the bottom for more.&nbsp;The <c 
>ode>transitionend</code>&nbsp;event offers two properties: 
n958        A string indicating the name of the CSS property whose trn962        字符,指示已完成过渡的属性。
>ansition completed. 
n964        A float indicating the number of seconds the transition hn968        浮点数,指示当触发这个事件时过渡已运行的时间(秒)。这个值不受 {{ cssxref("transition-de
>ad been running at the time the event fired. This value isn't aff>lay") }} 影响。
>ected by the value of {{ cssxref("transition-delay") }}. 
n968      As usual, you can use the {{ domxref("element.addEventListen972      照例可以用 &nbsp;{{ domxref("element.addEventListener()") }} 方法来
>ner()") }} method to monitor for this event:>监听这个事件:
n974      <strong>Note:</strong> 当transition取消后 <code>transitionend</n978      <strong>Note:</strong>&nbsp;如果取消了过渡则不会触发&nbsp;<code>transit
>code> 事件不会发生,因为属性值变化 the animating property's value is changed be>ionend</code> 事件,因为在过渡完成前动画的属性值改变了。
>fore the transition is completed. 
n976    <h2 id="When_property_value_lists_are_of_different_lengths">n980    <h2 id=".E5.B1.9E.E6.80.A7.E4.B8.8E.E5.80.BC.E7.9A.84.E5.88.9
 >7.E8.A1.A8.E9.95.BF.E5.BA.A6.E4.B8.8D.E4.B8.80.E8.87.B4">
977      属性列表长度不一致981      属性值列表长度不一致
n980      如果值列表长度短于属性列表长度,则重复值以使两者长度一致, 例如:n984      如果某个属性值列表长度短于其它的,则重复它的值让它们的长度一致, 例如:
n989      结果为:n993      将按下面这样处理:
n998      类似地,如果值列表长于{{ cssxref("transition-property") }}列表值列表将被截断。n1002      类似地,如果某个属性的值列表长于 {{ cssxref("transition-property") }} 的将被
>果有下面CSS:>截断。&nbsp;例如:
n1007      结果为:n1011      <span style="line-height: inherit;">将按下面这样处理</span>:
n1015    <h2 id="A_simple_example">n1019    <h2 id=".E7.AE.80.E5.8D.95.E4.BE.8B.E5.AD.90">
n1019      这个例子实现这样的效果:4s 字体大小,2s transition with a two-second delay bn1023      这个例子实现这样的效果:4s 过渡改变字体大小,2s 延迟——在元素上鼠标悬停时与开始动画效果之间:
>etween the time the user mouses over the element and the beginnin 
>g of the animation effect: 
n1037    <h2 id="Using_transitions_when_highlighting_menus">n1041    <h2 id=".E5.9C.A8.E9.AB.98.E4.BA.AE.E8.8F.9C.E5.8D.95.E6.97.B
 >6.E4.BD.BF.E7.94.A8_transition">
n1041      CSS的一个常用地方是当鼠标停在菜单上时高亮此菜单使用transition地做到引人注目。n1045      CSS 的一个常用地方是当鼠标停在菜单上时高亮此菜单使用 transition 很容人注目。
1042    </p>
1043    <p>1046    </p>
1047    <p>
1044      阅读代码前, 你可能想看<a class="external" href="/samples/cssref/trans1048      阅读代码前, 你可能想看<a class="external" href="/samples/cssref/trans
>itions/sample2" title="http://developer.mozilla.org/samples/cssre>itions/sample2" title="http://developer.mozilla.org/samples/cssre
>f/transitions/sample2/">演示</a> (假定你的浏览器支持transition)。你也可以看看 <a cl>f/transitions/sample2/">演示</a> (假定你的浏览器支持 transition)。你也可以看看 <a c
>ass="external" href="/samples/cssref/transitions/sample2/transiti>lass="external" href="/samples/cssref/transitions/sample2/transit
>ons.css" title="http://developer.mozilla.org/samples/cssref/trans>ions.css" title="http://developer.mozilla.org/samples/cssref/tran
>itions/sample2/transitions.css">这个</a>。>sitions/sample2/transitions.css">这个</a>。
n1092      这个 CSS 设了菜单的外观,在{{ cssxref(":hover") }}时,菜单里面的元素的文字颜色及背景色都n1096      这个 CSS 设了菜单的外观,在{{ cssxref(":hover") }}时,菜单里面的元素的文字颜色及背景色都
>变化。>变化。
1093    </p>
1094    <p>1097    </p>
1098    <p>
1095      与其废舌描述,不如你自己去看<a href="/samples/cssref/transitions/sample2"1099      与其废舌描述,不如你自己去看<a href="/samples/cssref/transitions/sample2"
> title="https://developer.mozilla.org/samples/cssref/transitions/> title="https://developer.mozilla.org/samples/cssref/transitions/
>sample2">示例</a> (前提是你的 <a class="external" href="/en/CSS/CSS_tran>sample2">示例</a> (前提是你的 <a class="external" href="/en/CSS/CSS_tran
>sitions#Browser_compatibility" title="en/CSS/CSS_transitions#Brow>sitions#Browser_compatibility" title="en/CSS/CSS_transitions#Brow
>ser_compatibility">浏览器支持transition</a>)。>ser_compatibility">浏览器支持 transition</a>)。
n1097    <h2 id="Using_transitions_to_make_JavaScript_functionality_smn1101    <h2 id=".E4.BD.BF.E7.94.A8transition.E8.AE.A9JavaScript.E6.95
>ooth">>.88.E6.9E.9C.E5.B9.B3.E6.BB.91">
1098      使用transition让JavaScript效果平滑1102      使用 transition  JavaScript 效果平滑
t1101      transition是非常好的工具,让JavaScript效果平滑而不用JavaScript。 看下面例子。t1105      transition 是非常好的工具,可以 JavaScript 效果平滑而不用修改 JavaScript。 看下面
 >例子。

返回历史