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