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。

在有人问：B。

之前，外部css的链接运行正常

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>