.box{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: box;
    animation-duration: 3s;
    animation-iteration-count: 3;
}

@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: pink;
        left:500px;
        top:0px;
        width:50px;
        height:50px;
    }

    100%{
        background-color: rgb(160, 247, 247);
        left:1000px;
        top:0px;
        width:100px;
        height:100px;
    }

}

.circle{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(249, 139, 249);
    position: relative;
    animation-name: circle;
}

@keyframes circle {

    0%{
        background-color:rgb(249, 139, 249);
        left:0px;
        top:0px;
        width:100px;
        height:100px;
    }

    25%{
        background-color: rgb(118, 174, 251);
        left:200px;
        top:0px;
        width:25px;
        height:25px;
    }

    75%{
        background-color: rgb(206, 247, 205);
        left:500px;
        top:0px;
        width:50px;
        height:50px;
    }

    100%{
        background-color: red;
        left:0px;
        top:0px;
        width:100px;
        height:100px;
    }
    
}