@keyframes animation in CSS


In this post you will learn CSS @keyframes and animation. You just need to know how to do it, after that you can do it easily, I am going to write applied visual design. And attaching screenshots for code understanding. I would suggest you to place the code with me in your favorite text editor and web browser.

@keyframes and animation

Let’s dive in….

This is the first example of css @keyframes animation

css keyframe animation

CSS Visual Design. This example uses a visual design to show the sequence of steps in a process. In it, we will show Rambo color by css.

 <style>
  div {
    height: 40px;
    width: 70%;
    background: red;
    margin: 50px auto;
    border-radius: 5px;
    position: relative;
  }

#rect {
  animation-name: rainbow;
  animation-duration: 4s;
}

@keyframes rainbow {
  0% {
    background-color: orange;
    top: 0px;
    left: 0px;
  }
  50% {
    background-color: yellow;
    top: 50px;
    left: 25px;
  }
  100% {
    background-color: green;
    top: 0px;
    left: -25px;
  }
  0% {
    background-color: blue;
    top: 0px;
    left: 0px;
  }
   50% {
  background-color: indigo;
  top: 50px;
  left: -25px
}
100% {
  background-color: violet;
  top: 0px;
  left: -25px;
}
}
</style>
<body>
  <div id="rect"></div>  
</body>
</html>

The above code should look like this video below in your preferred browser.

The @keyframes Rule

this is another example of css @keyframes animation Turn several CSS styles into one animation.

<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 5s infinite;
 margin: 15px auto;

}

@keyframes mymove {
   0%  {top: 0px; background-color: orange; left: 0px; }
  100% {top: 0px; background-color: green; left: -25px;}
  0% {top: 0px; background-color: blue;left: 0px;}
   50% {top: 50px;background-color: indigo;left: -25px;}
100% { top: 0px; background-color: violet;left: -25px;}
0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}
</style>
<body>
<div></div>
</body>

The above code should look like this video below in your preferred browser.

CSS keyframe animation