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