CSS - @keyframes Rule

Quiz

CSS @keyframes rule is used to define animations by specifying a sequence of frames or steps in the animation. The rule specifies the intermediate steps in the animation sequence by defining keyframes. Each keyframe describes a specific state of the animation at a particular point in time, from the beginning (0%) to the end (100%), and any intermediate points we choose to define.

Syntax

@keyframes animation-name {keyframes-selector {css-styles;}}

Property Values

Value	Description
animation-name	It specifies the name of the keyframe within which lies the animation code. Required.
key-frame-selector	It specifies the percentage of the animation duration. Valid values include: 0% to 100% / from (0%) - to(100%).
css-styles	It specifies the CSS style properties that have to undergo changes during the animation.

Examples of CSS Keyframe Rule

The following examples explain the @keyframe rule with different examples.

Color Changing Animation using @Keyframe

The following example demonstrates a color changing animation. The keyframes name is colorchange. The selectors used are from 0% to 100% through 25%, 50% and 75%. The style properties that change are the background-color, color and top properties.

Example

<!DOCTYPE html>
<html>
<head>

   <style>
      .container {
         height: 400px;
         width: 100%;
         background-color: lightgray;
      }
      .container >div{
         position: relative;
         height: 60px;
         border: 3px solid gray;
         animation: colorchange 6s infinite;
         text-align: center;
         font-size: 36px;
         font-weight: bold;
      }
      @keyframes colorchange{
         0%   {top: 0px;  background-color: red; color: white;}
         25%  {top: 75px;  background-color: white; color: black;}
         50%  {top: 150px;  background-color: lightblue; color: brown;}
         75%  {top: 225px;  background-color: #457b9d; color: orange;}
         100% {top: 300px;  background-color: darkblue; color: yellow;}
      }

   </style>
</head>
<body>
   <h2>
      CSS @keyframes rule
   </h2>
   <h4>
      Changing color example
   </h4>
   <div class="container">
      <div>
         TutorialsPoint
      </div>
   </div>
</body>
</html>

Motion Example using @Keyframes

The following example demonstrates a motion animation. The keyframes name is motion. The selectors used are from 0% to 100% through 50%. The style property that changes is the translateX.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .container {
         height: 200px;
         width: 100%;
         background-color: lightgray;
         border-bottom: 10px solid orange;
      }

      .container>div {
         position: relative;
         height: 80px;
         width: 80px;
         border-radius: 50%;
         border: 3px solid gray;
         animation: motion 6s infinite;
         top: 117px;
         background-color: black;
      }

      .inner {
         position: relative;
         height: 45px;
         width: 45px;
         border-radius: 50%;
         background-color: lightgray;
         top: 16px;
         left: 17px;
      }

      @keyframes motion {
         0% {
               transform: translateX(0px);
         }
         50% {
               transform: translateX(475px);
         }
         100% {
               transform: translateX(0px);
         }
      }
   </style>
</head>

<body>
   <h2>
      CSS @keyframes rule
   </h2>
   <h4>
      motion example
   </h4>
   <div class="container">
      <div>
         <div class="inner">
         </div>
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
@keyframes	43.0	10.0	16.0	9.0	30.0

css_reference.htm

Print Page