mozilla
Your Search Results

    transition

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    Summary

    The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It enables you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

    • Initial value the concatenation of the initial values of its longhand properties:
      • transition-delay: 0s
      • transition-duration: 0s
      • transition-property: all
      • transition-timing-function: ease
    • Applies to all elements, ::before and ::after pseudo-elements
    • Inherited no
    • Media interactive
    • Computed value as specified
    • Animatable no
    • Canonical order order of appearance in the formal grammar of the values

    Syntax

    /* Apply to 1 property */
    /* property name | duration */
    transition: margin-left 4s;
    
    /* property name | duration | delay */
    transition: margin-left 4s 1s;
    
    /* property name | duration | timing function | delay */
    transition: margin-left 4s ease-in-out 1s;
    
    /* Apply to 2 properties */
    transition: margin-left 4s, color 1s;
    
    /* Apply to all changed properties */
    transition: all 0.5s ease-out;
    
    /* Global values */
    transition: inherit;
    transition: initial;
    transition: unset;
    

    Note that order is important within the items in this property: the first value that can be parsed as a time is assigned to the transition-duration, and the second value that can be parsed as a time is assigned to 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.

    Formal syntax

    [ none | <single-transition-property> ] || <time> || <timing-function> || <time>

    where
    <single-transition-property> = all | IDENT

    Examples

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

    Specifications

    Specification Status Comment
    CSS Transitions
    The definition of 'transition' in that specification.
    Working Draft  

    Browser compatibility

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

    See also

    Document Tags and Contributors

    Last updated by: Sebastianz,