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可以看到它的实际效果。

CSS动画反弹（带曲线）

1 个答案: