bewegen Span Tag Animationen

Question

Ich wollte etwas ähnlich einem Textreader machen, wo ich mit diesem Satz beginnen:

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

dann zu diesem Satz verschieben:

ich einen CSS-Stil für die festgelegt haben wie folgt Absatz und Spanne:

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

und ich möchte nun von schwarz auf rot, die Farbe zu übergehen, wie die Spanne hervorgehoben. Ich verschiebe derzeit das span-Tag, indem ich das innerHTML der Seite ändere, und ich glaube, dass die Animation dadurch ausgelöst wird.

Hat jemand irgendwelche Ideen, wie ich den Übergang auslösen konnte, ohne den gesamten roten Text neu zu beleben.

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

Ich habe eine CSS-Animation von schwarz auf rot in der neuen Spanne Text verblassen, aber eines der Probleme, die ich hatte, war, dass es auch in der bestehenden Spanne roten Text verblassen würde. Um das zu beheben, habe ich zwei Span-Klassen eingeführt. Einer heißt vollständig und einer heißt neu. Die Animation wird nur auf neue angewendet.

So wie Sie neue HTML-Text anhängen, der letzte new Spanne müssen die complete Spanne hinzugefügt werden, bevor Sie den nächsten new Spanne hinzufügen usw.

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; } 
}