Compare Revisions

Using CSS transitions

Revision 40496:

Revision 40496 by grendel on

Revision 40497:

Revision 40497 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 40496
Revision 40497
n8      {{ gecko_minversion_header("2") }}n
9    </p>
10    <p>
n17      <strong>Note:</strong> Because the CSS transitions specificn14      <strong>Note:</strong> Because the CSS transitions specific
>ation is still in draft form, all properties associated with them>ation is still in draft form, all properties associated with them
> are prefixed with "-moz-" for use in&nbsp;Gecko. For compatibili> should be prefixed with "-moz-" for use in&nbsp;Gecko. For compa
>ty with WebKit, you should also use the "-webkit-" prefix, and fo>tibility with WebKit, you should also use the "-webkit-" prefix, 
>r Opera compatibility, use the "-o-" prefix. So, for example, you>and for Opera compatibility, use the "-o-" prefix. So, for exampl
> would specify the transition property as <code>-moz-transition</>e, you would specify the transition property as <code>-moz-transi
>code>, <code>-webkit-transition</code>, and <code>-o-transition</>tion</code>, <code>-webkit-transition</code>, and <code>-o-transi
>code>.>tion</code>.
n23      CSS&nbsp;transitions are controlled using the {{ cssxref("-n20      CSS&nbsp;transitions are controlled using the {{ cssxref("t
>moz-transition") }} shorthand property. This is the preferred way>ransition") }} shorthand property. This is the preferred way to s
> to set up your transitions, because it makes it easier to avoid >et up your transitions, because it makes it easier to avoid getti
>getting your parameter list lengths out of sync, which can result>ng your parameter list lengths out of sync, which can result in a
> in a frustratingly large amount of time spent debugging of your > frustratingly large amount of time spent debugging of your CSS.
>CSS. 
n30        {{ cssxref("-moz-transition-property") }}n27        {{ cssxref("transition-property") }}
n36        {{ cssxref("-moz-transition-duration") }}n33        {{ cssxref("transition-duration") }}
n42        {{ cssxref("-moz-transition-timing-function") }}n39        {{ cssxref("transition-timing-function") }}
n48        {{ cssxref("-moz-transition-delay") }}n45        {{ cssxref("transition-delay") }}
n71        A float indicating the number of seconds the transition hn68        A float indicating the number of seconds the transition h
>ad been running at the time the event fired. This value isn't aff>ad been running at the time the event fired. This value isn't aff
>ected by the value of {{ cssxref("-moz-transition-delay") }}.>ected by the value of {{ cssxref("transition-delay") }}.
n608  -moz-transition-property: opacity, left, top, height;n605  transition-property: opacity, left, top, height;
609  -moz-transition-duration: 3s, 5s;606  transition-duration: 3s, 5s;
n617  -moz-transition-property: opacity, left, top, height;n614  transition-property: opacity, left, top, height;
618  -moz-transition-duration: 3s, 5s, 3s, 5s;615  transition-duration: 3s, 5s, 3s, 5s;
n622      Similarly, if any property's value list is longer than thatn619      Similarly, if any property's value list is longer than that
> for {{ cssxref("-moz-transition-property") }}, it's truncated, s> for {{ cssxref("transition-property") }}, it's truncated, so if 
>o if you have the following CSS:>you have the following CSS:
n626  -moz-transition-property: opacity, left;n623  transition-property: opacity, left;
627  -moz-transition-duration: 3s, 5s, 2s, 1s;624  transition-duration: 3s, 5s, 2s, 1s;
n635  -moz-transition-property: opacity, left;n632  transition-property: opacity, left;
636  -moz-transition-duration: 3s, 5s;633  transition-duration: 3s, 5s;
n676  -moz-transition-property: font-size;n673  transition-property: font-size;
677  -moz-transition-duration: 4s;674  transition-duration: 4s;
678  -moz-transition-delay: 2s;675  transition-delay: 2s;
n683  -moz-transition-property: font-size;n680  transition-property: font-size;
684  -moz-transition-duration: 4s;681  transition-duration: 4s;
685  -moz-transition-delay: 2s;682  transition-delay: 2s;
n696-moz-transition-timing-function: linear;n693transition-timing-function: linear;
n699      There are several other standard timing functions availablen696      There are several other standard timing functions available
>; see {{ cssxref("-moz-transition-timing-function") }}&nbsp;for d>; see {{ cssxref("transition-timing-function") }}&nbsp;for detail
>etails.>s.
n708  -moz-transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.n705  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
>8); 
n736  -moz-transition-property: background-color, color;n733  transition-property: background-color, color;
737  -moz-transition-duration: 1s;734  transition-duration: 1s;
738  -moz-transition-timing-function: ease-out;735  transition-timing-function: ease-out;
n760  -moz-transition-property: background-color, color;n757  transition-property: background-color, color;
761  -moz-transition-duration: 1s;758  transition-duration: 1s;
762  -moz-transition-timing-function: ease-out;759  transition-timing-function: ease-out;
t836      The {{ cssxref("-moz-transition-property") }} property is ut833      The {{ cssxref("transition-property") }} property is used t
>sed to list the CSS&nbsp;properties we wish to have animated. In >o list the CSS&nbsp;properties we wish to have animated. In this 
>this case, the properties to animate are {{ cssxref("background-c>case, the properties to animate are {{ cssxref("background-color"
>olor") }}, {{ cssxref("color") }}, and {{ cssxref("left") }}. The>) }}, {{ cssxref("color") }}, and {{ cssxref("left") }}. The {{ c
> {{ cssxref("-moz-transition-duration") }} property indicates tha>ssxref("transition-duration") }} property indicates that we wish 
>t we wish the animation to take 5 seconds from start to finish.>the animation to take 5 seconds from start to finish.

Back to History