The @keyframe rules are used to define an animation in a gradual mode of movement. The keyframes describe the state of properties at each stage of the animation. Optionally, they also specify the timing function (similar to transition-timing-function) that controls the pace of the transition between each stage. You define a set of keyframes using @keyframes followed by the name you want to give the animation. All the rules for the keyframes go inside a pair of curly braces. 

Syntax:

selector { 

    @keyframes animation_name { keyframes_selector { css_styles; } }

}

Values:

A keyframes-selector requires the percentage of the animation duration. The browser automatically sorts the keyframe definitions into ascending order. However, using this shorthand tends to make @keyframe rules difficult to read. The following list represents the values settings for the @keyframes rules:

  • animation_name; This value is required and it specifies the name of the animation being created.
  • keyframes_selector; Also required. It represents the value of the animation duration given in percentage (%) or keywords from / to. Percentage may be from 0% to 100%, where 0% equals ‘from’ and 100% equals ‘to’.
  • css_styles; The last values is also required and it refers to one or more CSS style properties.
NOTE: Note that examples from this moment on for simplicity reasons may not include proprietary selectors from this point on.

Example

The @keyframes rule example:

​x
 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
    position: relative;
    width: 1px; height: 1px; top:0px; left:0px;
    background: #99aa22;
    animation: animation 5s infinite;
        /* ADD proprietary selectors if needed */
}
@keyframes animation {
    0% {width: 1px;}
    50% {width: 90%;}
    0% {height: 1px;}
    50% {height: 150px;}
}
</style>
</head>
  
<body>
​
<h3>CSS3 animation @keyframes rule example:</h3>
​
<div></div>
​
</body>
</html>

 

›› go to examples ››