Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to define the name of the keyframe that binds to the selector in CSS?

  • Last Updated : 26 Mar, 2021

There has been a rise in animated websites these days. Writing and running animations on a web page requires the use of the keyframes to set some kind of rules for that frame in which that animation is being performed. While writing the required properties in the keyframes, we basically assign a value that varies from 0% to 100%. The 0% denotes the starting of the animation and 100% denotes the finishing. The keywords from and to which specifies that from which level to which level we have to run the animation out of 100%.

The name of the keyframe that binds to the selector is defined using the animation-name property. The animation property can also be used to define the name as its first attribute.

Syntax:

element-selector {
  animation-name: name;
}

The below examples demonstrate how to specify the name of the keyframe that binds to the selector.

Example 1: Using the animation-name property.



HTML




<html>
<head>
  <style>
    div {
      width: 200px;
      height: 200px;
      background: #731897;
      position: relative;
  
      /* Using the animation-name property
      to define the name of the animation */
      animation-name: GFG;
      animation-duration: 3s;
      animation-iteration-count: 5;
    }
  
    /* Define the animation to be used */
    @keyframes GFG {
      0% {
        top: 0px;
        left: 0px;
        background: #731897;
      }
  
      25% {
        top: 0px;
        left: 200px;
        background: #E94848;
      }
  
      50% {
        top: 200px;
        left: 200px;
        background: #51B43A;
      }
  
      75% {
        top: 200px;
        left: 0px;
        background: #484EE9;
      }
  
      100% {
        top: 0px;
        left: 0px;
        background: #731897;
      }
    }
  </style>
</head>
<body>
  <h1 style="color: green;">
    GeeksforGeeks
  </h1>
  <h3>
    This is animation effect
    using @keyframes
  </h3>
  <div></div>
</body>
</html>

Output:

Example 2: Using the animation property.

HTML




<html>
<head>
  <style>
    div {
      width: 200px;
      height: 200px;
      background: #731897;
      position: relative;
  
      /* Using the animation property
      to define all the parameters of the
      animation */
      animation: GFG 3s 5;
    }
  
    /* Define the animation to be used */
    @keyframes GFG {
      0% {
        top: 0px;
        background: #731897;
        width: 200px;
      }
  
      100% {
        top: 400px;
        background: #E94848;
        width: 600px;
      }
    }
  </style>
</head>
<body>
  <h1 style="color: green;">
    GeeksforGeeks
  </h1>
  <h3>
    This is animation effect
    using @keyframes
  </h3>
  <div></div>
</body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!