This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

@keyframes

Summary

Sets the keyframes for the CSS animation property.

Examples

Example of prefixed/prefix-free @keyframes blocks

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

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

View live example

Example of an unprefixed @keyframes block that uses percentages to control the keyframes more exactly.

@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;
    }
}

View live example

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

CSS Animations
W3C Working Draft

See also

Related articles

Animation

Syntax

Other articles

Related pages

Attributions