.shapes{
    margin-top: 10%;
    justify-content: center;
    margin-left: 50%;
}

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: box 5s ease-in-out infinite alternate;
}

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

.circle{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: greenyellow;
    position: relative;
    animation: circle 5s ease-in-out infinite alternate;
}

@keyframes circle{
    0% {background-color: greenyellow; left:200px; top:0px; width: 100px; height: 100px;}
    25% {background-color: green; left:100px; top:50px; width: 25px; height: 25px;}
    75% {background-color: yellow; left: 50px; top:100px; width: 100px; height: 100px;}
    100% {background-color: blue; left:0px; top:200px; width: 25px; height: 25px; }
}