mozilla

Compare Revisions

Using CSS transitions

Change Revisions

Revision 40507:

Revision 40507 by yyss on

Revision 40508:

Revision 40508 by mechaxl on

Title:
CSS transitions
CSS transitions
Slug:
CSS/CSS_transitions
CSS/CSS_transitions
Tags:
css, Gecko, NeedsTechnicalReview, NeedsMarkupWork, NeedsBrowserCompatibility, "CSS Transitions", Fixit
css, Gecko, NeedsTechnicalReview, NeedsMarkupWork, NeedsBrowserCompatibility, "CSS Transitions", Fixit
Content:

Revision 40507
Revision 40508
n58      There is a single event that is fired when transitions compn58      There is a single event that is fired when transitions comp
>lete. In Firefox, the event is <code>transitionend</code>, in Ope>lete. In Firefox, the event is <code>transitionend</code>, in Ope
>ra, <code>OTransitionEnd</code>, and in WebKit it is <code>webkit>ra, <code>oTransitionEnd</code>, and in WebKit it is <code>webkit
>TransitionEnd</code>. See the compatibility table at the bottom f>TransitionEnd</code>. See the compatibility table at the bottom f
>or more.&nbsp;The <code>transitionend</code>&nbsp;event offers tw>or more.&nbsp;The <code>transitionend</code>&nbsp;event offers tw
>o properties:>o properties:
n649      This <a class=" external" href="http://cssglue.com/cubic">Cn649      This <a class="external" href="http://cssglue.com/cubic">CS
>SS transition function manipulator</a> is a convenient tool to vi>S transition function manipulator</a> is a convenient tool to vis
>sually generate CSS transition timing functions.>ually generate CSS transition timing functions.
n681      Before we look at code snippets, you might want to <a classn681      Before we look at code snippets, you might want to <a class
>=" external" href="http://developer.mozilla.org/samples/cssref/tr>="external" href="/samples/cssref/transitions/sample3" title="htt
>ansitions/sample3/" title="http://developer.mozilla.org/samples/c>p://developer.mozilla.org/samples/cssref/transitions/sample3/">ta
>ssref/transitions/sample3/">take a look at the live demo</a> (ass>ke a look at the live demo</a> (assuming your browser supports tr
>uming your browser supports transitions). You can also take a <a >ansitions). You can also take a <a class="external" href="/sample
>class=" external" href="http://developer.mozilla.org/samples/cssr>s/cssref/transitions/sample3/transitions.css" title="http://devel
>ef/transitions/sample3/transitions.css" title="http://developer.m>oper.mozilla.org/samples/cssref/transitions/sample3/transitions.c
>ozilla.org/samples/cssref/transitions/sample3/transitions.css">lo>ss">look directly at the CSS</a> it uses.
>ok directly at the CSS</a> it uses. 
n752      Before we look at code snippets, you might want to <a classn752      Before we look at code snippets, you might want to <a class
>=" external" href="http://developer.mozilla.org/samples/cssref/tr>="external" href="/samples/cssref/transitions/sample2" title="htt
>ansitions/sample2/" title="http://developer.mozilla.org/samples/c>p://developer.mozilla.org/samples/cssref/transitions/sample2/">ta
>ssref/transitions/sample2/">take a look at the live demo</a> (ass>ke a look at the live demo</a> (assuming your browser supports tr
>uming your browser supports transitions). You can also take a <a >ansitions). You can also take a <a class="external" href="/sample
>class=" external" href="http://developer.mozilla.org/samples/cssr>s/cssref/transitions/sample2/transitions.css" title="http://devel
>ef/transitions/sample2/transitions.css" title="http://developer.m>oper.mozilla.org/samples/cssref/transitions/sample2/transitions.c
>ozilla.org/samples/cssref/transitions/sample2/transitions.css">lo>ss">look directly at the CSS</a> it uses.
>ok directly at the CSS</a> it uses. 
n823      Before we look at code snippets, you might want to <a classn823      Before we look at code snippets, you might want to <a class
>=" external" href="http://developer.mozilla.org/samples/cssref/tr>="external" href="/samples/cssref/transitions/sample1" title="htt
>ansitions/sample1/" title="http://developer.mozilla.org/samples/c>p://developer.mozilla.org/samples/cssref/transitions/sample1/">ta
>ssref/transitions/sample1/">take a look at the live demo</a> (ass>ke a look at the live demo</a> (assuming your browser supports tr
>uming your browser supports transitions). You can also take a <a >ansitions). You can also take a <a class="external" href="/sample
>class=" external" href="http://developer.mozilla.org/samples/cssr>s/cssref/transitions/sample1/transitions.css" title="http://devel
>ef/transitions/sample1/transitions.css" title="http://developer.m>oper.mozilla.org/samples/cssref/transitions/sample1/transitions.c
>ozilla.org/samples/cssref/transitions/sample1/transitions.css">lo>ss">look directly at the CSS</a> it uses.
>ok directly at the CSS</a> it uses. 
n909      <strong>Note:</strong> Once <a class=" external" href="httpn909      <strong>Note:</strong> Once <a class="external" href="http:
>://dev.w3.org/csswg/css3-animations/" title="http://dev.w3.org/cs>//dev.w3.org/csswg/css3-animations/" title="http://dev.w3.org/css
>swg/css3-animations/">CSS&nbsp;animations</a> support is availabl>wg/css3-animations/">CSS&nbsp;animations</a> support is available
>e, JavaScript code won't be necessary to achieve this effect.>, JavaScript code won't be necessary to achieve this effect.
t1130        <a class=" external" href="http://www.w3.org/TR/css3-trant1130        <a class="external" href="http://www.w3.org/TR/css3-trans
>sitions" title="http://www.w3.org/TR/css3-transitions">CSS Transi>itions" title="http://www.w3.org/TR/css3-transitions">CSS Transit
>tions Module Level 3</a>>ions Module Level 3</a>

Back to History