Добавить эффект отскока в конце css translate

Question

Я использую requestanimationframe и css transform: translateX для перемещения изображения по экрану на прокрутке. Я хочу добавить эффект «отскока» в конце прокрутки. Если бы я использовал jQuery, я мог бы просто добавить облегчение в анимацию, но я вытаскиваю jQuery из анимации.

Я бы предпочел не использовать другую библиотеку, есть ли способ добиться эффекта «вобуляции», используя чистый CSS?

Answer 1

Да, вы можете полностью сделать это с помощью чистого CSS. Ознакомьтесь с базовым примером ключевых кадров ниже. Вы можете легко настроить его, чтобы сделать его более быстрым, более гладкой, более и т.д.

#bouncingObject { 
 
    /* Regular CSS for the object */ 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: absolute; 
 
    top: 200px; 
 

 
    /* Handling the animation */ 
 
    -webkit-animation-name: bounce; 
 
    -webkit-animation-duration: 2s; 
 
    animation-name: bounce; 
 
    animation-duration: 2s; 
 
} 
 

 
/* Defining the animation by dividing it to keyframes */ 
 
@keyframes bounce { 
 
    0% {top:0px;} 
 
    25% {top:200px;} 
 
    40% {top:150px;} 
 
    55% {top:200px;} 
 
    70% {top:180px;} 
 
    85% {top:200px;} 
 
    100% {top:200px;} 
 
} 
 

 
/* This is for Safari 4.0 - 8.0 */ 
 
@-webkit-keyframes bounce { 
 
    0% {top:0px;} 
 
    25% {top:200px;} 
 
    40% {top:150px;} 
 
    55% {top:200px;} 
 
    70% {top:180px;} 
 
    85% {top:200px;} 
 
    100% {top:200px;} 
 
}

<div id="bouncingObject"></div>