@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.



Compatibility

There is no data available for topic "css", feature "@keyframes". If you think that there should be data available, consider opening an issue.

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

See also

Related articles

Animation

  • @keyframes
















Syntax




  • @keyframes











Other articles

Related pages (MSDN)

Attribution

This article contains content originally from external sources.

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