CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES

CSS3 @keyframes rule

Topic: CSS3 Properties ReferencePrev|Next

Description

The @keyframes CSS at-rule is used to specify the intermediate steps during the cycle of an animation sequence by establishing the keyframes along the animation sequence.

A @keyframes rule consists of the keyword "@keyframes", followed by an identifier giving a name for the animation (which will be referenced using animation-name property), followed by a set of style rules (delimited by curly braces).

The keyframe selector for a keyframe style rule starts with a percentage (%) or the keywords from (same as 0%) or to (same as 100%). The selector is used to specify where a keyframe is constructed along the duration of the animation.


Syntax

The syntax of this at-rule is given with:

@keyframes animation-name {
    keyframes-selector {
         property: value;
    }
}

The example below shows the @keyframes at-rule in action.

.box {
        width: 50px;
        height: 50px;
        background: red;
        position: relative;
        /* Chrome, Safari, Opera */
        -webkit-animation-name: moveit;
        -webkit-animation-duration: 2s;
        /* Standard syntax */
        animation-name: moveit;
        animation-duration: 2s;
    }
    
    /* Chrome, Safari, Opera */
    @-webkit-keyframes moveit {
        from {left: 0;}
        to {left: 50%;}
    }
    
    /* Standard syntax */
    @keyframes moveit {
        from {left: 0;}
        to {left: 50%;}
    }

Note: If a keyframe selector specifies negative percentage values or values higher than the 100%, then the keyframe will be ignored.


Parameters

The following table describes the parameters of this at-rule.

Value Description
Required — The following parameters are required for the CSS to be valid.
animation-name The name of the animation.
keyframes-selector Specifies the percentage along the duration of the animation. The keyframe declaration block for a keyframe rule consists of properties and values.

Browser Compatibility

The @keyframes rule is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 5+ -moz-, 16+
  • Google Chrome 4+ -webkit-
  • Internet Explorer 10+
  • Apple Safari 4+ -webkit-
  • Opera 12+ -o-, 15+ -webkit-

Further Reading

See tutorial on: CSS Media Types.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties