circular loop (css only)

(css only)

by stofke

HTML

<div id="box"></div>

CSS

@keyframes loop {
    25% {
        transform: translate(100px, 0px);
    }
    50% {
        transform: translate(100px, 100px);
    }
    75% {
        transform: translate(0px, 100px);
    }
}
#box {
    position: absolute;
    top: 100px;
    left: 100px;
    background-color:red;
    width: 100px;
    height:100px;
    animation: loop 4s ease infinite;
}