添加css动画以跨越文本答案

【问题标题】：Adding css animation to span in text添加css动画以跨越文本
【发布时间】：2017-11-23 12:54:12
【问题描述】：

我的网站上有一个段落，我希望某些字词在 animate.css 中显示出来。我已成功将 animate.css 添加到我的站点，但是，当我尝试将其添加到我的 span 类时，它不起作用。我做了一些研究，似乎你必须在跨度上添加一个显示，因为如果显示不工作，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>

【问题讨论】：

你应该阅读这个css-tricks.com/animate-to-an-inline-style

标签： css animate.css

【解决方案1】：

您只需说inline-block 代码按预期工作，只是它跳动一次然后停止。

添加无限意味着它将不断重复动画。

您可以阅读文档here.

.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>

【讨论】：

【解决方案2】：

据我了解，这是因为跨度未显示内联块；

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

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

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

我添加了一个名为动画的额外 css 类，它将使脉冲在无限循环上运行。

【讨论】：