.box {
width:200px;
height:200px;
background-color:lightblue;
/*position:relative;*/
}
/* hover */
.box-animation {
animation-name:change-color;
animation-duration:1s;
animation-iteration-count:1; /*infinite*/
animation-delay:0s;
}
@keyframes change-color {
from {background-color:red;}
to {background-color:yellow;}
/*0% {background-color:red;}
20% {background-color:orange;}
40% {background-color:yellow;}
60% {background-color:green;}
80% {background-color:blue;}
100% {background-color:purple;}*/
/*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;}*/
}