Question

我的网站上有一个段落，我想让某些词语与animate.css冲动。我已成功将animate.css添加到我的网站，但是，当我尝试将其添加到我的span类时，它无法正常工作。我做了一些研究，看起来你必须在跨度上添加一个显示，因为如果显示不起作用，animate.css不起作用。这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你只需要说TestCase代码正在运行，只是它只是脉动一次然后停止。

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

您可以阅读文档here.

inline-block

.animatespan {
  display: inline-block;
}

Answer 2

根据我的理解，因为跨度没有显示为内联块;

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

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

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

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

添加css动画以跨越文本

2 个答案: