.box {
    background: #333;
    margin: 10% 0 0 40%;
    padding: 10px;
    width: 100px;
    height: 100px;
    position: relative;
    animation-name: run;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

@keyframes run {
    0% {
        background-color: #ad5f5e;
        border-radius: 10% 10% 10% 10%;
        left: 0px;
        top: 0px;
    }
    25% {
        background-color: #fe4a49;
        border-radius: 0 50% 0 0;
        left: 200px;
        top: 0px;
    }
    50% {
        background-color: #fed766;
        border-radius: 0 0 50% 50%;
        left: 200px;
        top: 200px;
    }
    75% {
        background-color: #8a1620;
        border-radius: 50% 50% 50% 0;
        left: 0px;
        top: 200px;
    }
    100% {
        background-color: #ad5f5e;
        border-radius: 50% 50% 50% 50%;
        left: 0px;
        top: 0px;
    }
}