Hinzufügen von CSS-Animation zum Überspannen im Text

Question

Ich habe einen Absatz auf meiner Website, von dem ich möchte, dass bestimmte Wörter mit animate.css pulsieren. Ich habe die Datei animate.css erfolgreich zu meiner Site hinzugefügt. Wenn ich versuche, sie meiner span-Klasse hinzuzufügen, funktioniert sie jedoch nicht. Ich habe etwas recherchiert und es sieht so aus, als müssten Sie der Anzeige eine Anzeige hinzufügen, da animate.css nicht funktioniert, wenn die Anzeige nicht funktioniert. Hier ist mein Code:

.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

Von dem, was ich verstehe, es ist, weil die Spanne nicht inline-block angezeigt wird;

so müssten Sie Folgendes tun:

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

Hier ist ein funktionierendes Beispiel: https://jsfiddle.net/8ea9armk/1/

Ich habe eine zusätzliche CSS-Klasse hinzugefügt namens animiert, die der Puls auf laufen machen eine Endlosschleife.

Answer 2

Sie müssen nur sagen inline-block der Code wurde funktioniert erwartet, es ist nur, dass es einmal pulsierte und dann zu stoppen.

Wenn Sie unendlich hinzufügen, wird die Animation wiederholt.

können Sie lesen Sie die Dokumentation 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>