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％。对前一个关键帧的旋转角度求和可以为重复添加更逼真的效果。即：

@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/

css动画如何让球反弹

1 个答案: