KEYFRAME ANIMATION

Here we will be talking about CSS animations and keyframes.

Now, the way CSS animations and keyframes work is very simple. First, you have to define or create a CSS animation rule and name it any name you want. Second, you add this animation rule so that the animation works on it. This will be much easier if we see it in action.

keyframe

So here in my HTML, I have this div all by itself. I've added some styles to it in my CSS. I've just added a width, height, and a blue background color. So when we view this in the browser, we can see our empty div is sitting right here.

<div></div>
         div {
            width: 100px;
            height: 100px;
            background-color: blue;
}

Now see how to use keyframes and animation on this div. So we said that the first thing we need to do is to define the animation rule. And in order to do that, we write it like this:

@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(1000px); }
}

What this animation rule will do is it will take the element from one state to another. It will take the element from translateX(0) (its original position) to translateX(1000px).

Now, if you see nothing changed. The element is just sitting in its place, and no movement has happened. That's because we created the animation rule but didn't tell the browser which element will receive this animation.

To make the animation work on the element, we need to add two properties to the element itself:

animation-name: move; animation-duration: 3s; 
@keyframes move {
 from { transform: translateX(0);
        opacity: 1;
      }
   to {
      transform: translateX(1000px);
       opacity: 0.5;
     background-color: green;
            }
        }

       
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: move;
            animation-duration: 3s;
            animation-timing-function: ease-in-out;
            animation-delay: 1s;
}
See Demo:  Codepen