부트 스트랩 컨테이너 바운스 만드는 방법

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