?> 背景知识：:point_right: animation, timing-function, transform
小球下落过程属于自由落体运动，在时间函数timing-function中,ease（更快的加速度）相对更接近于自由落体运动，所以下落过程我们选用ease作为时间函数的关键值；当小球被弹起时属于减速运动，我们需用使用ease的方向版本cubic-bezier(.1,.25,.1,.25)（更快的减速度）作为时间函数的函数值来模仿减速运动。调速函数如下图所示：
<script v-pre type="text/x-template" id="bounce"> <style> main{ width: 100%; height: 584px; padding: 52px 39px; background: #0c1a39 url('./static/starry-sky.jpg') no-repeat center bottom / 100% 489.5px; } .ball { width: 0; margin: auto; padding: 20px; border-radius: 50%; background: #b4a078 radial-gradient(at 30% 30%, #f7f5f1, #b4a078); animation: bounce 2s cubic-bezier(.1,.25,1,.25) forwards; /* 当动画完成后，保持最后一帧 */ } @keyframes bounce { 40%, 60%, 80%, to { transform: translateY(380px); animation-timing-function: ease-in; } 50% { transform: translateY(260px); } 70% { transform: translateY(300px); } 90% { transform: translateY(360px); } } </style> 🔄