Эффект отскока

?> Обзор: анимация, функция временной шкалы, преобразование

Процесс падения мяча представляет собой свободное падение. В функциях временной шкалы 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> 🔄 ▶️ <script> module.exports = { data () { return { animationName: 'bounce', }; }, methods: { reset() { this.animationName = 'none'; }, play() { this.animationName = 'bounce'; } } }; </script> </script>

Поддержка браузерами<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-animation&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-transitions&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="432px"></iframe>