CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
SPONSORED LINKS

CSS3 @keyframes rule

Topic: CSS3 Properties Reference« Prev|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.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.