ブートストラップコンテナをバウンスする方法

Question

私はブートストラップを使い始めましたが、クラス「コンテナ」のバウンスを作成する際にいくつか問題があります。 これは私がこれまで

 @keyframes bouncing{ 
 
    \t 0% { top:0px;} 
 
     100% { top:50px;} 
 
     } 
 
     
 
     #arrow{ 
 
     animation-duration:2s; 
 
     animation-name:bouncing; 
 
     animation-iteration-count: infinite; 
 
     font-size:2em; 
 
     }

<div class="container" id="arrow"> 
 
      <span class="glyphicon glyphicon-chevron-down" > </span> 
 
    \t </br> 
 
    \t <a href="#" >Find out more</a> 
 
    </div>

Answer 1

私はanimate.css経由@keyframesをつかむ持っているものです。

@keyframes bouncing { 
 
    from, 20%, 53%, 80%, to { 
 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    transform: translate3d(0,0,0); 
 
    } 
 

 
    40%, 43% { 
 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    transform: translate3d(0, -30px, 0); 
 
    } 
 

 
    70% { 
 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    transform: translate3d(0, -15px, 0); 
 
    } 
 

 
    90% { 
 
    transform: translate3d(0,-4px,0); 
 
    } 
 
} 
 

 
.bouncing { 
 
    position: absolute; 
 
    animation-duration: 2s; 
 
    animation-name: bouncing; 
 
    animation-iteration-count: infinite; 
 
    font-size: 2em; 
 
}

<div class="container bouncing" id="arrow"> 
 
     <span class="glyphicon glyphicon-chevron-down" > </span> 
 
     <br> 
 
     <a href="#" >Find out more</a> 
 
</div>

JSFiddle