mozilla
Your Search Results

    animation-timing-function

    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 animation-timing-function property specifies how a CSS animation should progress over the duration of each cycle. The possible values are one or several <timing-function>.

    For keyframed animations, the timing function applies between keyframes rather than over the entire animation. In other words, the timing function is applied at the start of the keyframe and at the end of the keyframe.

    An animation timing function defined within a keyframe block applies to that keyframe; otherwise. If no timing function is specified for the keyframe, the timing function specified for the overall animation is used.

    It is often convenient to use the shorthand property animation to set all animation properties at once.

    Syntax

    animation-timing-function: ease;
    animation-timing-function: ease-in;
    animation-timing-function: ease-out;
    animation-timing-function: ease-in-out;
    animation-timing-function: linear;
    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    animation-timing-function: step-start;
    animation-timing-function: step-end;
    animation-timing-function: steps(4, end);
    
    animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
    

    Values

    <timingfunction>
    Each <timing-function> represents the timing function to link to the corresponding property to animate, as defined in animation-property.

    Formal syntax

    <timing-function>#
    

    Examples

    See CSS animations for examples.

    Specifications

    Specification Status Comment
    CSS Animations
    The definition of 'animation-timing-function' in that specification.
    Working Draft Initial definition.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support (Yes)-webkit
    43.0
    5.0 (5.0)-moz
    16.0 (16.0)
    10 12 -o
    12.10
    4.0-webkit
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
    Basic support (Yes)-webkit 5.0 (5.0)-moz
    16.0 (16.0)
    ? 12-o (Yes)-webkit ?

     

    See also

    Document Tags and Contributors

    Last updated by: teoli,