纯css实现弹跳，仿真重力碰撞效果 循环动画/ease-in
你还不如出手敲一遍的视频
直接敲你的代码连定位都是错的
相对定位里写top，还有90%里把transleteY不写会覆盖掉。你这利用反向的缺点就是还没碰到地面时球就开始变形了。我有点怀疑你没手敲过，而是从某处copy出来的
```html
<div class="container">
<div id="bounce">
<div class="ball"></div>
<div class="ground"></div>
</div>
</div>
```
```less
*{margin:0;}
body{background-color: #000;}
.container{
display: flow-root;
#bounce {
width: 300px;
height: 300px;
position: relative;
margin:200px auto;
.ball {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 0;
left: 160px;
animation: 1.5s falling infinite;
@keyframes falling {
0%,100%{
transform: translateY(0px) scale(1,1);
}
50%{
transform: translateY(216px) scale(1,1);
}
51%{
transform: translateY(214px) scale(0.8,1);
}
52%{
transform: translateY(202px) scale(1,0.8);
}
}
}
.ground {
width: 400px;
height: 20px;
background-color: #fff;
position: absolute;
bottom: 0;
}
}
}
```
