在css結尾處添加反彈效果翻譯

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>