Animate.Adding CSS动画将跨越文本

Question

我在我的网站上有一个段落，我希望某些单词用Animate.css脉动。我已经成功地将Animate.css添加到了我的网站，但是，当我尝试将其添加到跨度类中时，它无法正常工作。我做了一些研究，似乎您必须在跨度上添加显示屏，因为如果显示不起作用，则Animate.css不起作用。这是我的代码：

.animatespan {
  display: -moz-inline-stack;
  display: inline-block !important;
  zoom: 1;
  vertical-align: top;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<h1>
  Text that is not supposed to animate 
  <span style="color:#4ceb90" class="animated pulse animatespan">pulsing word</span>
  Text that is not supposed to animate
  <span style="color:#4ceb90" class="animated pulse animatespan">pulsing word</span>
  Text that is not supposed to animate
  <span style="color:#4ceb90" class="animated pulse animatespan">pulsing word.</span>
</h1>

Answer 1

您只需要说inline-block代码正常工作，预计它只是在脉冲一次，然后停止。

添加无限意味着它将继续重复动画。

您可以在此处阅读文档。

.animatespan {
  display: inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<h1>
  Text that is not supposed to animate 
  <span style="color:#4ceb90" class="animated pulse infinite animatespan">pulsing word</span>
  Text that is not supposed to animate
  <span style="color:#4ceb90" class="animated pulse infinite animatespan">pulsing word</span>
  Text that is not supposed to animate
  <span style="color:#4ceb90" class="animated pulse infinite animatespan">pulsing word.</span>
</h1>

Answer 2

我了解的是因为跨度未显示inline-block;

因此您需要执行以下操作：

.animatespan {
    display: -moz-inline-stack;
    zoom: 1;
    vertical-align: top;
}
h1 span {
    display:inline-block;
}

这是一个工作示例：https://jsfiddle.net/8ea9armk/1/

我添加了一个名为Animation的额外的CSS课程，这将使脉冲在无限的环路上运行。