移動spanタグのアニメーション

Question

は、私はこの文で始まるたTextReader、と同様のものを作りたかったです段落およびスパンは次のとおりです。

p { color: black } span { color:red } 

そして、私はスパンが強調表示されるようになりました黒から赤に色を移行したいと思います。私は現在、ページのinnerHTMLを変更してスパンタグを移動していますが、それはトリガーを避けるためにアニメーションを引き起こしていると思います。

誰かが、どのように私がトリガするために、赤いテキストをすべて再アニメーション化することなく、どのようなアイデアを持っていますか？

setTimeout(function(){ 
 
    newText = "<p> <span> This is some text that I want</span> to write </p>" 
 
    ptag = document.querySelector('p') 
 
    ptag.innerHTML = newText 
 
}, 1000)

p{ color: black } 
 
span{ color:red }

<p> <span> This is some </span> text that I want to write </p>

Answer 1

私は黒から赤に新しいスパンテキストをフェードインするために、CSSアニメーションを作成しましたが、私が持っていた問題の一つは、それはまた、既存のスパン赤いテキストでフェードインというものでした。そこで、私は2つのスパンクラスを導入したことを修正しました。 1つは完全と呼ばれ、もう1つは新しいと呼ばれます。アニメーションは新規にのみ適用されます。私が検討した

新しいHTMLテキストを追加すると、あなたが次のnewスパンを追加する前に、最後のnewスパンは、completeスパンに追加する必要がありますが、その他

http://codepen.io/partypete25/pen/YWJQQB

function update(){ 
    newText = "<p> <span class='complete'> This is some text</span><span class='new'> that I want</span> to write </p>" 
    ptag = document.querySelector('p') 
    ptag.innerHTML = newText 
} 


setTimeout(function(){ update() }, 1000); 

p { 
    color:black; 
} 
span.complete { 
    color:red; 
} 
span.new { 
    animation: color-change 2s linear 1 forwards; 
} 

@-webkit-keyframes color-change { 
    0% { color: black; } 
    100% { color: red; } 
}