12. Animation
November 11, 2023Less than 1 minute
Double Color Switch
<style>
@keyframe change-color{
from {background-color: red;}
to {background-color: blue;}
}
.box{
width: 200px;
height: 200px;
background-color: grey;
}
.box-animation{
animation-name: change-color;
animation-duration: 10s;
animation-iteration-count: 1;
animation-delay: 5s;
}
</style>
<div class="box box-animation"></div>
Multiple Colors Switch
<style>
@keyframe change-color{
0% {background-color: red;}
20% {background-color: orange;}
40% {background-color: yellow;}
60% {background-color: green;}
80% {background-color: blue;}
100% {background-color: purple;}
}
.box{
width: 200px;
height: 200px;
background-color: grey;
}
.box-animation{
animation-name: change-color;
animation-duration: 10s;
animation-iteration-count: 1;
animation-delay: 5s;
}
</style>
<div class="box box-animation"></div>
Position Move
<style>
@keyframe change-color{
0% {background-color: red; top: 10px; left 10px;}
20% {background-color: orange; top: 20px; left 20px;}
40% {background-color: yellow; top: 30px; left 30px;}
60% {background-color: green; top: 40px; left 40px;}
80% {background-color: blue; top: 50px; left 50px;}
100% {background-color: purple; top: 60px; left 60px;}
}
.box{
width: 200px;
height: 200px;
background-color: grey;
}
.box-animation{
animation-name: change-color;
animation-duration: 10s;
animation-iteration-count: 1;
animation-delay: 5s;
}
</style>
<div class="box box-animation"></div>