텍스트에 스팬 (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>