CSS Animation Tutorial: Keyframe Animation example-4 || animation-direction 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 one of the animation property which is animation-direction.
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;
animation-delay: -2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@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;}
}