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看到它在行动。