mozilla

Compare Revisions

Using CSS transitions

Change Revisions

Revision 40499:

Revision 40499 by borismus on

Revision 40500:

Revision 40500 by borismus 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 40499
Revision 40500
tt636    <h2>
637      Transition timing functions
638    </h2>
639    <p>
640      Timing functions determine how intermediate values of the t
 >ransition are calculated. The timing function can be specified by
 > providing the graph of the corresponding function, as defined by
 > a cubic bezier:
641    </p><img src="/@api/deki/files/5226/=transition-timing-functi
 >on.png" alt="">
642    <p>
643      This <a class=" external" href="http://cssglue.com/cubic">C
 >SS transition function manipulator</a> is a convenient tool to vi
 >sually generate CSS transition timing functions.
644    </p>
645    <p>
646      Instead of specifying a bezier directly, there are pre-defi
 >ned timing values:
647    </p>
648    <ul>
649      <li>
650        <strong>ease</strong>, equivalent to <code>cubic-bezier(0
 >.25, 0.1, 0.25, 1.0)</code>
651      </li>
652      <li>
653        <strong>linear</strong>, equivalent to <code>cubic-bezier
 >(0.0, 0.0, 1.0, 1.0)</code>
654      </li>
655      <li>
656        <strong>ease-in</strong>, equivalent to <code>cubic-bezie
 >r(0.42, 0, 1.0, 1.0)</code>
657      </li>
658      <li>
659        <strong>ease-out</strong>, equivalent to <code>cubic-bezi
 >er(0, 0, 0.58, 1.0)</code>
660      </li>
661      <li>
662        <strong>ease-in-out</strong>, equivalent to <code>cubic-b
 >ezier(0.42, 0, 0.58, 1.0)</code>
663      </li>
664    </ul>

Back to History