CSS 애니메이션이 전혀 작동하지 않습니다

Question

어디에 문제가 있는지 알 수 없습니다.

.media-p .see-more .box { 
 
    -webkit-animation-name: bounceInUp; 
 
} 
 

 
@-webkit-keyframes bounceInUp { 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: translateY(2000px); 
 
    -ms-transform: translateY(2000px); 
 
    transform: translateY(2000px); 
 
    } 
 

 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: translateY(-30px); 
 
    -ms-transform: translateY(-30px); 
 
    transform: translateY(-30px); 
 
    } 
 

 
    80% { 
 
    -webkit-transform: translateY(10px); 
 
    -ms-transform: translateY(10px); 
 
    transform: translateY(10px); 
 
    } 
 

 
    100% { 
 
    -webkit-transform: translateY(0); 
 
    -ms-transform: translateY(0); 
 
    transform: translateY(0); 
 
    } 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css" rel="stylesheet"/> 
 
<div class="see-more"> 
 
    <div class="col-xs-6 col-sm-3 col-md-3"> 
 
    <div class="box midia"> 
 
     <h3>Midia</h3> 
 

 
     <div class="avatar"> 
 
     <img src="http://lorempixel.com/200/200/" class="img-responsive img-circle"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

내가 다른 애니메이션에서 동일한 코드 형식을 사용하고, 그리고 노력

. animate.css를 사용하고 있습니다.

누군가가 물어보기 전에 외부 CSS에 대한 링크가 잘 작동하고 있습니다. B.

Answer 1

과 같이, 애니메이션에 시간을 보내기

-webkit-animation: 1s bounceInUp; 

---

.see-more .box { -webkit-animation: 1s bounceInUp; } 
 

 
@-webkit-keyframes bounceInUp { 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: translateY(2000px); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: translateY(-30px); 
 
    } 
 
    80% { -webkit-transform: translateY(10px); } 
 
    100% { -webkit-transform: translateY(0); } 
 
}

<div class="see-more"> 
 
    <div class="col-xs-6 col-sm-3 col-md-3"> 
 
     <div class="box midia"> 
 
      <h3>Midia</h3> 
 

 
      <div class="avatar"> 
 
       <img src="http://lorempixel.com/200/200/" class="img-responsive img-circle"/> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>