Want to animate an object from left to right using CSS

October 7, 2022

I am trying to animate a simple object in my site from left to right on the viewport but cannot figure out whats wrong with my code. Trying to do it in Microsoft VS Code.
code is produced below

.ball {
    border: 5px solid red;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background-color: blue;
    position: absolute;
    top: 0;
    left: 0;
    animation-name: moveBall;
    animation-duration: 5s;
    animation: alternate;
}

@keyframes moveBall {
    from {
        top: 0;
        left: 0;
    }

    to {
        left: 100%;
    }
}

<div class="ball"></div>

would appreciate if someone can help me point out the problem in the code that is preventing the ball from moving from left to right.

>Solution :

You accidentally assigned animation: alternate. It is a shorthand that overrides the animation-name.

What you want is animation-direction: alternate

FYI, animation-direction: alternate will not work if the animation-iteration-count is 1(default), so you may also want to assign animation-iteration-count: 2 or animation-iteration-count: infinite etc.

.ball {
    border: 5px solid red;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background-color: blue;
    position: absolute;
    top: 0;
    left: 0;
    animation-name: moveBall;
    animation-duration: 5s;
    animation-direction: alternate;
}

@keyframes moveBall {
    from {
        top: 0;
        left: 0;
    }

    to {
        left: 100%;
    }
}