What is keyframe in animation

In this article, we will see about what is keyframe in animation and how to use it in CSS.

Keyframes

It is a technique, which is generally used for animating thing and they are not specific to CSS, HTML, JavaScript or programming in General. A keyframe is nothing else than a frame to which you assign a certain value of a property. Your animation software or in our case the browser is then automatically animating the property on the regular frames between two keyframes.

If you have an animation consisting of 1000 frames and you want to animate the position of an object. So, beginning of your animation, your object should be on the left side and then it should move to the rightside of the screen. Let’s see an example of keyframe usage.

Example of keyframes

HTML:

<html>
   <head>
      <title>Keyframes</title>-
   </head>
   <body>
      
      <div class="container">
         <div class="object"> </div>
      </div>

  </body>
</html>

CSS:

body{
            display: flex;
            align-items: center;
            justify-content: center;
            display: flex;
         }
         .container{
            border: 2px solid black;
            width: 400px;
            height: 400px;
         }
         .object{
            width: 100px;
            height: 100px;
            background-color: darkred;
            position: relative;
            left: 150px;
            top: 150px;
         }

In the above code, we have creted a <div> with classname “container” and inside it another <div> tag with classname “object”.
Then in CSS, we have set the border, width, and height to containter div. Then we select the “object” using classselector in CSS, set the “position” to “relative”, background-color, width, and height. See, the output, the object is displayed centered inside the container.
output:
Now, we will create an animation where the object is moving leftside to the rightside.
To do that by using two keyframes, on the 1st keyframes will be first frame of the animation for beginning our red object should be on the leftside. The 2nd keyframe will be the last frame of the animation, where we say that our red object square should be on the rightside. Then the browser is able to generate the animation, where the red object slowly moving from left to right. Let’s see how to create keyframe:
```
@keyframes lefttoRight{
            from{
               left: 0px;
            }
            to{
               left: 300px;
            }
         }
```
Write the keyword “@keyframes” and put the identifier name “lefttoright”.
Iniside the keyframe, we use “from” keyword, which means first frame of our animation should be a keyframe and inside the block, we can specify the CSS property. And we also created “to” for last frame of our animation.
Inside the “from” block, we set “left” to 0px because of the starting position is left. Inside the “to” block, we set “left” to 300px because of the ending position is right.
Then we have to specify the animation to “object” style by using “animation” property to “lefttoRight”, which is animation-name and “2s”, which is animation-duration. And remove the “left” property in object style.
See the Live preview below, the object square is moving left to right in the container.