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

    @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:yellow; left:1000px; top:200px; width: 50px; height: 50px;}
        100% {background-color:blue; left:0px; top:0px; width: 100px; height: 100px;}
    }

.circle{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: greenyellow;
    position: relative;
    animation-name: circle;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    }

    @keyframes circle {
        0% {background-color:greenyellow; left:600px; top:400px; width: 50px; height: 50px;} 
        25% {background-color:blueviolet; left:1000px; top:200px; width: 100px; height: 100px;}
        75% {background-color:violet; left:0px; top:0px; width: 25px; height: 25px;}
        100% {background-color:green; left:600px; top:400px; width: 50px; height: 50px;}
    }