transition

Redirected from en/CSS/-moz-transition

Table of contents

  1. 1. Summary
  2. 2. Syntax
  3. 3. Examples
  4. 4. Specifications
  5. 5. Browser compatibility
  6. 6. See also
Page Notifications Off

This is an experimental feature
Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental feature is subject to change in future version of browsers as the spec changes.

Summary

The transition CSS property is a shorthand property for transition-property , transition-duration , transition-timing-function , and transition-delay .

  • Initial value : transition is a shorthand property, so it does not technically have an initial value
    but the properties for which it is shorthand have the following initial values:
    • transition-property: all
    • transition-duration: 0s
    • transition-timing-function: ease
    • transition-delay: 0s
  • Applies to: all elements, :before and :after pseudo elements
  • Inherited : no
  • Media: interactive
  • Computed value : as specified

Syntax

transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

See When property value lists are of different lengths for details on how things are handled when lists of property values aren't the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.

Examples

There are several more examples of CSS transitions included in the main CSS transitions article.

Specifications

Browser compatibility

  • Desktop
  • Mobile

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 -webkit 4.0 (2.0) -moz 10.0 -ms  11.6 -o 3.0 -webkit
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 -webkit ? ? 10.0 -o 3.2 -webkit

Tags (6)

Edit tags

Attachments (0)

 

Attach file