html - CSS动画弹跳(带曲线)

Question

我正在尝试用 CSS 动画制作一个弹跳球。

.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;}}

当我使用这段代码时，我得到了在 this picture 上显示的动画(红色的)。我如何获得像绿色动画这样的动画？

Answer 1

您需要同时指定两个动画，一个将球上下移动，另一个将球从左向右移动:

.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;
    }
}

这是一个 fiddle看看它的实际效果。