mozilla

Compare Revisions

transition-duration

Change Revisions

Revision 14456:

Revision 14456 by tregagnon on

Revision 14457:

Revision 14457 by tregagnon on

Title:
transition-duration
transition-duration
Slug:
CSS/transition-duration
CSS/transition-duration
Tags:
css, "CSS Reference", "CSS:Mozilla Extensions", NeedsMobileBrowserCompatibility, Fixit
css, "CSS Reference", "CSS:Mozilla Extensions", NeedsMobileBrowserCompatibility, Fixit
Content:

Revision 14456
Revision 14457
n4 n
5    <style type="text/css">
6![CDATA[.cssprop {
7    display:table;
8    padding: 0.4em;
9    border-left:0.15em solid;
10    background-color:#eeeeff
11    }
12    .cssprop li {
13    display:table-row;
14    padding: 3px;
15    margin:0;
16    }
17    .cssprop li dfn {
18    display:table-cell;
19    padding: 0 5px;
20    border-bottom: none;
21    cursor:inherit;
22    }
23 
24    ]]>
25    </style>
n39      You may specify multiple durations; each duration will be an17      You may specify multiple durations; each duration will be a
>pplied to the corresponding property as specified by the {{ cssxr>pplied to the corresponding property as specified by the {{ cssxr
>ef("transition-property") }} property, which acts as a master lis>ef("transition-property") }} property, which acts as a master lis
>t. If there are fewer durations specified than in the master list>t. If there are fewer durations specified than in the master list
>, missing values are set to the initial value (<code>0s</code>). >, missing values are set to the initial value (<code>0s</code>). 
>Iif there are more durations, the list is simply truncated to the>If there are more durations, the list is simply truncated to the 
> right size. In both case the CSS declaration stays valid.>right size. In both case the CSS declaration stays valid.
40    </p>18    </p><nobr>&lt;style type="text/css"&gt;<!--[CDATA[.cssprop {
19  display:table;
20  padding: 0.4em;
21  border-left:0.15em solid;
22  background-color:#eeeeff
23}
24.cssprop li {
25 display:table-row;
26 padding: 3px;
27 margin:0;
28}
29.cssprop li dfn {
30  display:table-cell;
31  padding: 0 5px;
32  border-bottom: none;
33  cursor:inherit;
34}
35 
36 
37]]-->&lt;/style&gt;</nobr>
n59      Syntaxn56      <nobr>Syntax</nobr>
n62transition-duration: <em>time</em>[, <em>time</em>]*n59<nobr>transition-duration: <em>time</em>[, <em>time</em>]*
60</nobr>
n65      where :n63      <nobr>where :</nobr>
n69        <em>time</em>n67        <nobr><em>time</em></nobr>
n72        Is a {{ xref_csstime() }} denoting the amount of time then70        <nobr>Is a {{ xref_csstime() }} denoting the amount of ti
> transition from the old value of a property to the new value sho>me the transition from the old value of a property to the new val
>uld take.>ue should take.</nobr>
n76      Examplesn74      <nobr>Examples</nobr>
77    </h3>
78    <p>75    </h3>
76    <p>
79      There are several examples of CSS transitions included in t77      <nobr>There are several examples of CSS transitions include
>he main <a href="/en/CSS/CSS_transitions" title="en/CSS/CSS trans>d in the main <a href="/en/CSS/CSS_transitions" title="en/CSS/CSS
>itions">CSS&nbsp;transitions</a> article.> transitions">CSS&nbsp;transitions</a> article.</nobr>
80    </p>
81    <h3>78    </p>
79    <h3>
82      Specifications80      <nobr>Specifications</nobr>
n86        <a class="external" href="http://www.w3.org/TR/css3-transn84        <nobr><a class="external" href="http://www.w3.org/TR/css3
>itions" title="http://www.w3.org/TR/css3-transitions">CSS Transit>-transitions" title="http://www.w3.org/TR/css3-transitions">CSS T
>ions Module Level 3</a> (Working Draft)>ransitions Module Level 3</a> (Working Draft)</nobr>
n90      Browser compatibilityn88      <nobr>Browser compatibility</nobr>
91    </h3>
92    <p>89    </h3>
90    <p>
93      {{ CompatibilityTable() }}91      <nobr>{{ CompatibilityTable() }}</nobr>
n188      See alson186      <nobr>See also</nobr>
n192        <a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transn190        <nobr><a href="/en/CSS/CSS_transitions" title="en/CSS/CSS
>itions">CSS transitions</a>> transitions">CSS transitions</a></nobr>
191      </li>
193      </li>192      <li>
194      <li>{{ cssxref("transition") }}193        <nobr>{{ cssxref("transition") }}</nobr>
194      </li>
195      </li>195      <li>
196      <li>{{ cssxref("transition-property") }}196        <nobr>{{ cssxref("transition-property") }}</nobr>
197      </li>
197      </li>198      <li>
198      <li>{{ cssxref("transition-timing-function") }}199        <nobr>{{ cssxref("transition-timing-function") }}</nobr>
200      </li>
199      </li>201      <li>
200      <li>{{ cssxref("transition-delay") }}202        <nobr>{{ cssxref("transition-delay") }}</nobr>
t204      {{ languages( { "ja": "ja/CSS/transition-duration"} ) }}t206      <nobr>{{ languages( { "ja": "ja/CSS/transition-duration"} )
 > }}</nobr>

Back to History