Question

我正在研究一个项目，同时也在学习，到目前为止，一切都很顺利！

但是我希望能够使用Animate.css中的动画css代码，该代码应与wow.js文件中的javascript协同工作。基本上，我需要帮助解决为什么animate.css代码（例如，哇动画弹跳或哇动画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;
}

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

Answer 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/

Answer 2

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

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

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

See this fiddle

为什么我的文字没有弹出？ CSS，HTML

2 个答案: