Скачать или смотреть 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;}
}