CSS animation problem, loop isn't being complete

July 28, 2023

This is the result of a css animation. The circle is going from top-left > top-right > bottom-right > bottom-left and after the sequence is done, it goes all the way back in the opposite order (to top-left). I want it to take a shortcut and go directly to the starting point from it’s last position (bottom-left) without taking all the way back again. I don’t think it’s possible with one command and i’m expecting a work-around.

circle is just a div:

<div class="cir"></div>

and the CSS is:

<style>
    .cir {
        width: 300px;
        height: 300px;
        border-radius: 50%;
        border: 10px solid black;
        position: absolute;
        top:0;
        left:0;
        animation-name: slideMe;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function:linear;
        }
        @keyframes slideMe {
            0% {
                top: 0;
                left: 0;
            }
            25% {
                top: 0;
                left: 85%;
            }
            50% {
                top: 85%;
                left: 85%;
            }
            100% {
                top: 85%;
                left: 0;
            }
        }
    }
</style>

>Solution :

Move your 100% keyframe to 75% and add 100% to your first keyframe so it could be looped. Also remove alternate direction since you want the animation cycled in a circle:

    .cir {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 10px solid black;
        position: absolute;
        top:0;
        left:0;
        animation-name: slideMe;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function:linear;
        }
        @keyframes slideMe {
            0%,100% {
                top: 0;
                left: 0;
            }
            25% {
                top: 0;
                left: 85%;
            }
            50% {
                top: 85%;
                left: 85%;
            }
            75% {
                top: 85%;
                left: 0;
            }
        }
    }