.box{
    width: 400px;
    height: 400px;
    outline: 1px solid red;
}

.element{
    width: 100px;
    height: 100px;
    animation-name: move;
    animation-duration: 6s;
    animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation-iteration-count: infinite;
    background-color: red;
}

@keyframes move{
    0% {
            background-color: red;
            
        }
    
        15% {
            background-color: orangered;
           transform: translateX(300px);
        }
    
        25% {
            background-color: yellow;
            transform: translate(300px, 300px);
        }
    
        50% {
            background-color: green;
            transform: translate(300px, 300px);
        }
    
        65% {
            background-color: aqua;
        transform: translate(-0px, 300px);
        }
    
        100% {
            background-color: blueviolet;
           
        }
}