CSS - @keyframes

The @keyframes at-rule in CSS is used to define a set of keyframes for animations or transitions. Keyframes are a way to specify how an element's style changes over the course of an animation. You define the intermediate steps, or keyframes, between the starting and ending states of an animation.

Syntax

@keyframes = 
   @keyframes <keyframes-name> { <rule-list> }

Possible Values

@keyframes at-rule in CSS can have following values:

  • <custom-ident>: Determines the name of the keyframe list. This name must match the identifier production in CSS syntax.

  • from: Determines the starting offset of 0%.

  • to: Determines the ending offset of 100%.

  • <percentage>: Determines the percentage of time during the animation sequence, when the specified keyframe should occur.

Overview

  • In order to use keyframes, you need to create a @keyframe rule, specifying a name, that will be used by the animation-name property.

  • Each @keyframe rule consists of a style list of keyframe selectors, that specifies percentage value through the animation, when the keyframe occurs.

  • It also lists the block containing the styles for the specific keyframe.

  • While passing the percentage values, you can use them in any order. The system handles them in the order they should occur.

  • The @keyframes at-rule with the CSS object model interface CSSKeyframesRule, can be accessed by JavaScript.

  • When the start and end states of the animation are not clearly specified, the existing styles of elements for start / end states, will be used by the browsers. This is used for the animation of an element from its initial state and back. The properties that can not be animated using the keyframes, are ignored, but the properties that are supported will be animated.

  • In case there are multiple keyframe sets exist for a common name, the last one specified and encountered by the parser, will be considered. Since @keyframes rules do not cascade, the animations will never derive from more than one keyframe rule set.

  • In case of duplication of given animation time offset, all keyframes in the @keyframes rule for the specified percentage value are used for that frame. Cascading within the @keyframes rule takes place, when multiple keyframes specify the same percentage value.

  • The properties that are left out of certain keyframes are calculated or interpolated and those that can not be interpolated are avoided from the animation.

  • When a keyframe is declared multiple times, where not all affected properties are specified in each keyframe, all specified values in these keyframes are considered.

  • All the declarations in a keyframe with !important qualifier, are ignored.

The cascading keyframes are supported only from Firefox 14.

Example

Here is an example for the @keyframes at-rule.

<html> 
<head> 
<style> 
   div { 
      width: 100px; 
      height: 100px; 
      margin: 100px; 
      background-color: blue; 
      animation: sample-box 8s infinite; 
   } 

   @keyframes sample-box { 
      0% { 
      background-color: red; 
      } 

      25% { 
         background-color: yellow; 
      } 

      50% { 
         background-color: lightgreen; 
      } 

      75% { 
         background-color: royalblue; 
      } 

      100% { 
         background-color: purple; 
      } 
   } 
</style> 
</head> 
<body> 
   <div></div> 
</body> 
</html>

In the above example:

  • @keyframes at-rule is defined by the name sample-box and certain styling is specified.

  • The keyframes name is passed to the animation property on div element, which animates the element considering the styling mentioned under that keyframe rule.

  • sample-box is the name of the animation, 8s is the duration of the animation and infinite means the animation repeats indefinitely.

Here is another example for the @keyframes at-rule.

<html>
<head>
<style> 
   div {
      width: 100px;
      height: 100px;
      background: green;
      position: relative;
      animation: sample-rule 5s infinite;
   }

   @keyframes sample-rule {
      from {left: 0px;}
      50% {left: 50px;} /* ignored */
      to {left: 100px;}
   }
</style>
</head>
<body>
   <h1>@keyframes At-Rule</h1>
   <p>Check for the animation</p>
   <div></div>
</body>
</html>

In the above example:

  • @keyframes at-rule is defined by the name sample-rule and certain styling is specified.

  • The keyframes name (sample-rule) is passed to the animation property on div element, which animates the element and moves the box from left to right.

  • sample-rule is the name of the animation, 5s is the duration of the animation and infinite means the animation repeats indefinitely.

Advertisements