?> Background：:point_right: animation, timing-function, transform
The falling of ball is a typical Free Fall motion, in the timing function, ease(sharper accelerated speed) is relatively closer to the free-fall motion. Therefore, we use the ease as the keyword during the falling process; However, when the ball is bounced, it belongs to the deceleration motion, we need to use the ease direction version cubic-bezier(.1,.25,.1,.25)(faster deceleration) as the function value of the time function to mimic deceleration. The speed control function is shown below:
<script v-pre type="text/x-template" id="bounce_tlp"> <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); /* when the animation is complete, keep the last frame */ 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> 🔄