.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;}*/
    
}