javascript - Simple css transition doesn't work -

i have problem repeating animation in firefox , chrome. use simple js make repeatable.

(function step() {     settimeout(function() {         var coin7 = document.getelementbyid('coin7');         coin7.style.display = 'block';         coin7.style.height = "210px";     }, 2000)      settimeout(function(){         coin7.style.display = "none";         coin7.style.height = "0";     },6000);     settimeout(step, 7000) })(); 

demolink http://jsfiddle.net/pe461zrn/

first iteration ok in browsers, second , next doesn't apply css transition in ff39 , latest chrome. , it's still work fine @ iteration in ie11.

how can fix it?

try applying height timeout 0 sure happens after display set block (which prevent animation)

settimeout(function(){coin7.style.height = "210px";}, 0);