2017-03-15 18 views
0

<a> ... </a>タグ内のテキストの色を一定の時間間隔の後に黒から赤に変えて永久的に赤に変えることができるかどうかは疑問でした。テキストを印刷し、HTMLとCSSを使用して色を変更してください

do { 
    document.getElementById("code").innerHTML +="<a>Hello World</a><br>"; 
    await sleep(...) 
    document.getElementById("code").innerHTML +="<a>Hello World</a><br>"; 
    await sleep(...) 
    document.getElementById("code").innerHTML +="<a>Hello World</a><br>"; 
    await sleep(...) 
    document.getElementById("code").innerHTML +="<a>Hello World</a><br>"; 
} while {...} 

と、このコードを実行した後に、それは、第2の「Hello World」がそうで印刷し、変更するには、そのテキストの色を黒から赤に、となり、黒から赤に最初の「Hello World」を変更する必要があります。 ...

私はこの問題に関するさまざまな方法を模索している

...

a { 
    animation: change 1s step-end both; 
} 

@keyframes change { 
    from { color: black } 
    to { color: red } 
} 

が、私はこの方法の問題は、それは常にすべてのテキストに戻って黒から赤に変化していることであることを見つけたものタグが入っていて色の変化が恒久的ではありません。

+0

リロードした後でも ''を赤色にしますか? – YounesM

+0

こんにちは、コメントのおかげで、いいえ、再読み込み後、私のテキストは、最初は黒であり、印刷ステートメントの後....そこに遅延(2s)...その後、テキストが赤くなります。リロードした後、テキストは元の色に戻ります。 –

答えて

0

@keyframesは使用しないでください。キーフレームはループ内で機能するため、

+0

こんにちは、返信いただきありがとうございます、キーフレームのループフリーのバージョンはありますか? –

+0

なぜこれを行うにはsetTimeout()メソッドを使用しないでください。 –

+0

これを使用して簡単に色を変更できます。私は間に@keyframeを停止することはできないと思う。少なくとも1つは実行され、最初の状況が再度表示されます(あなたの場合は黒色)。 –

関連する問題