リフレッシュ

Question

私はCSSアニメーションとjQueryを使用して、段落を実装していなくてCSSアニメーションを適用する方法。クリックされたとき

このCSSアニメーションが適用され、それが元のテキストを返します。もう一度クリックすると、アニメーションが機能しません。私はそれを更新するためにリフレッシュする必要があります。

私は1つのクリックイベントの後にリフレッシュする必要がないように、このCSSのアニメーションを実装したいです。

不要なコードが省略されます。 これは私がこれまで持っているものです。

$(document).ready(function(){ 
 
    $('#intro_bullet').click(function(){ 
 
    $('#intro span').addClass('animation'); 
 
    }); 
 
});

.animation { 
 
    animation-name: color_change; 
 
    animation-duration: 5s; 
 
    animation-iteration-count: 2; 
 
    animation-direction: alternate; 
 
} 
 

 

 
@-webkit-keyframes color_change { 
 
    from { color: #333386; } 
 
    to { color: white; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="intro_bullet">Intro</li> 
 
</ul> 
 

 
<div id="intro"> 
 
    <span>Paragraph about intro</span> 
 
</div>

Answer 1

あなたが最初のクラスを削除する必要があり、その後、offsetWidthすることができますを使用してハックがありますdivを 'リセット'して、アニメーションを再び実行できるようにします。詳細についてはSee hereをご覧ください。

$(document).ready(function(){ 
 
    $('#intro_bullet').click(function(){ 
 
     $('#intro span').removeClass('animation'); 
 
     void $('#intro span')[0].offsetWidth; 
 
     $('#intro span').addClass('animation'); 
 
    }); 
 
});

.animation { 
 
    animation-name: color_change; 
 
    animation-duration: 5s; 
 
    animation-iteration-count: 2; 
 
    animation-direction: alternate; 
 
} 
 

 

 
@keyframes color_change { 
 
    from { color: yellow;} 
 
    to { color: royalblue;} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="intro_title">Intro</li> 
 
    <li id="intro_bullet">Click here</li> 
 
</ul> 
 

 
<div id="intro"> 
 
    <span>Paragraph about intro</span> 
 
</div>

Answer 2

試してみてください。

animation-iteration-count: infinite;