设置CSS简易性，而不是缓和

Question

Setting the text colour of an ID with CSS transitions isn't working. It just changes it to red, but doesn't ease it.

document.getElementById('colourword').innerHTML =
"<span id='flash' style='color: #000; transition: color 0.5s ease-in 0.5s; -moz-transition: color 0.5s ease-in 0.5s; -webkit-transition: color 0.5s ease-in 0.5s;'>X</span>";

var flash = document.getElementById('flash');
flash.style.color = "#dd0000";

If I type in the console document.getElementById('flash').color = "000"; It will then fade black.

Any ideas?

Answer 1

Its like a instant change on the color and it dosen't know what to change color from

This works for me:

document.body.innerHTML =
"<span id='flash' style='color: #000; transition: color 0.5s ease-in 0.5s; -moz-transition: color 0.5s ease-in 0.5s; -webkit-transition: color 0.5s ease-in 0.5s;'>X</span>";

setTimeout(function() {
    var flash = document.getElementById('flash');
    flash.style.color = "#dd0000";
},0);