为什么我的文字没有弹回？ CSS, HTML答案

【问题标题】：Why isnt my text bouncing in? CSS, HTML为什么我的文字没有弹回？ CSS, HTML
【发布时间】：2016-05-16 04:31:27
【问题描述】：

我正在做一个项目，同时我也在学习，到目前为止一切都很好！

但我希望能够使用 Animate.css 中的动画 css 代码，它应该与 wow.js 文件中的 javascript 协同工作。本质上，我需要帮助解决 animate.css 代码（例如，哇动画bounceIn 或哇动画fadeInUp）为什么不起作用。

我会为您提供文件，但我不擅长 JSFiddle，但这是重要的部分。

html

    <header>
        <h2 class="wow animated bounceIn" data-wow-duration="700ms" data-wow-delay="100ms">Meet the Authors</h2>
    </header>

CSS

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

如果需要，我可以提供文件

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

您需要像这样将这个 .animated 添加到您的样式中：

.animated {
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}

演示：https://jsfiddle.net/IA7medd/qv5L7osh/

【讨论】：

我明白你的意思，但我的仍然站着不动

【解决方案2】：

要使您的动画有效，您必须添加更多内容，而不仅仅是声明animation-name。

至少，您必须在其上添加一个持续时间，如下所示：

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  animation-duration: 4s;
  -webkit-animation-duration: 4s;
}

See this fiddle

【讨论】：