翻訳の末尾にバウンスエフェクトを追加する

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>