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>