テキストの範囲に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

私はスパンがインラインブロックを表示されていないからだと理解して何から。

ので、あなたが次のことを行う必要があります：私は、パルスが動作になりますアニメーションという名前の余分なCSSクラスを、追加しました https://jsfiddle.net/8ea9armk/1/

：ここ

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

は実施例であります無限ループ

Answer 2

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>