@keyframes

< css‎ | atrules
Jump to: navigation, search

@keyframes

This article is In Progress.


W3C Working Draft

Summary

Sets the keyframes for the CSS animation property.

Examples

View live exampleExample of prefixed/prefix-free @keyframes blocks

CSS

/* defining the animation */
@keyframes fadeInAnimation {
    /* starting state */
    from {
        opacity: 0;
    }
    /* ending state */
    to {
        opacity: 1;
    }
}

/* applying the animation */
div {
    animation: fadeInAnimation linear;
}

View live exampleExample of an unprefixed @keyframes block that uses percentages to control the keyframes more exactly.

CSS

@keyframes bounceFadeInAnimation {
    /* starting state (same as "from") */
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0.4;
    }
    15% {
        opacity: 0;
    }
    25% {
        opacity: 0.6;
    }
    50% {
        opacity: 0;
    }
    65% {
        opacity: 0.8;
    }
    80% {
        opacity: 0;
    }
    /* ending state (same as "to") */
    100% {
        opacity: 1;
    }
}

Notes

Remarks

The version of this rule using a vendor prefix, @-ms-keyframes, has been deprecated. To ensure compatibility in the future, applications using this rule with a vendor prefix should be updated accordingly. This rule has no default value. This rule is used to specify property values at various points during an animation. The @keyframes rule specifies the property values during one cycle of an animation; the animation may iterate one or more times. This rule uses keyframe selectors to specify property values at various stages of the animation. Keyframe selectors can be declared as from (equivalent to 0%), to (equivalent to 100%), and one or more percentages. Keyframe selectors use keyframe descriptors to specify the properties and values being animated. If a property cannot be animated, the specification is ignored.

Syntax

@keyframes <identifier> { <keyframes_blocks> };

Parameters

identifier
The name of the animation.
keyframes_blocks
A set of keyframes blocks, each of which is composed of keyframe selectors.

Related specifications

Specification Status Related Changes
CSS Animations W3C Working Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support
4.0 -webkit
16.0
5.0 -moz
10
12.10
12 -o
4.0 -webkit

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support
4.0 -webkit
7.0 -webkit
18.0 -webkit
15.0 -moz
?
12.1
Unsupported
3.2 -webkit


Partial Support
2.1 -webkit
Unsupported
Unsupported
Unsupported
10
Unsupported
Unsupported
Unsupported

The given value was not understood.

Compatibility notes

Browser Version Note
iOS Safari all Only some properties are hardware accelerated, this is also the case with transitions. Known properties are: opacity, translate3d. There may be more, but it is hard to find documentation for this.

See also

Related articles

The given value was not understood.

Animation



  • @keyframes


















The given value was not understood.

Syntax




  • @keyframes











Other articles

Related pages (MSDN)

Attribution

The given value was not understood. This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]


The given value was not understood.