CODEWITHSUNDEEP
htmlcssanimationbounce
XYZ
XYZ

Reputation: 13

CSS animation bounce (with a curve)

I'm trying to make a bouncing ball with a CSS animation.

.bouncing-ball{-webkit-animation:bounce 3s;position:absolute;bottom:0;left:0}

@-webkit-keyframes bounce{50% {bottom:20%;left:40%;}100% {left:80%;bottom:0;}}

When I use this code I get the animation like show on this picture (The red one). How do I get an animation like the green one?

Upvotes: 1

Views: 2352

Answers (1)

wavemode
wavemode

Reputation: 2116

You need to specify two simultaneous animations, one that moves the ball up and down and another that moves it from left to right:

.bouncing-ball {
    width: 100px;
    height: 100px;
    background: black;

    position:absolute;
    bottom: 0;
    left: 0;

    animation: bounce 3s, move 3s; // separated by a comma

}

@keyframes bounce{
    100% {
        left:80%;
    }
}

@keyframes move {
    50% {
        bottom: 20%;
    }
    100% {
        bottom: 0;
    }
}

Here's a fiddle to see it in action.

Upvotes: 1

Related Questions