CSS Animation Tutorial: Keyframe Animation example-2 || animation-duration property
This is the tutorial on CSS Animation and in this tutorial we will learn how to use keyframe animation with various examples.
In this particular video we will learn how to change the color and position of an element at the same time using Keyframe animation
CSS code: -
body{
margin: 0px;
padding: 0px;
box-sizing: border-box;
/* display: flex;
justify-content: center;
align-items: center;
height: 100vh; */
background-color: #000;
height: 100vh;
padding: 40px;
}
.keyframe_example{
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: change_color;
animation-duration: 4s;
}
@keyframes change_color {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:100px; top:0px;}
50% {background-color:blue; left:100px; top:100px;}
75% {background-color:green; left:0px; top:100px;}
100% {background-color:red; left:0px; top:0px;}
}