css动画如何让球反弹

Question

我目前正在学习 CSS 动画，我想知道如何平滑地将球弹起然后再次落下，目前它平滑上升但一旦到达顶部并再次开始就会重置(与下降相反再次下降)

.football {
 background-image:url('football.png');
 height:45px;
 width:45px;
 top:100%;
 left:40%;
 position:absolute;
 animation:football_up_down 1s linear infinite;
}

@keyframes football_up_down {  
 100% { transform:rotate(360deg); top:30%;  } 
 0% { transform:rotate(180deg); top:100%} 

}

Answer 1

正如他们在评论中所说，您可以添加 animation-direction: alternate。

但您也可以添加一个 50% 点作为峰值点，然后添加一个 100% 点复制 0%。将先前关键帧的旋转 Angular 相加可以为重复添加更逼真的效果。即:

@keyframes football_up_down {  
  0% { transform:rotate(180deg); top:100% } 
  50% { transform:rotate(360deg); top:30%; } 
  100% { transform:rotate(540deg); top:100% } 
}

工作示例:http://jsfiddle.net/w2mH8/