.box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: box;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 1s;
    animation-direction: alternate;
    }



@keyframes box{
    0% {background-color:red; left:0px; top:0px; width: 100px; height: 100px;} 
    25% {background-color:orange; left:200px; top:0px; width: 25px; height: 25px;}
    75% { background-color: blue; left:200px; top:200px; width: 100px; height: 100px;}
    100% { background-color: aquamarine; left:0px; top:0px; width: 20px; height: 20px;}
}



.circle
{width: 50px;
height: 50px;
border-radius: 50%;
background-color: greenyellow;
position: relative;
animation-name: circle;
}

@keyframes circle{
    0% {background-color:purple; left:200px; top:200px; width: 100px; height: 100px;} 
    25% {background-color:red; left:50px; top:0px; width: 75px; height: 25px;}
    75% { background-color: orange; left:75px; top:200px; width: 50px; height: 50px;}
    100% { background-color: lavender; left:100px; top:0px; width: 20px; height: 20px;}     
}