Triggering a Transition

Using JavaScript to (re)trigger a CSS3 animation.

by Mark Simon

HTML

<p id="test">This space for rent</p>

CSS

p#test {
	opacity: 0;
}
p#test[on] {
	transition: opacity 2s;
	opacity: 1;
}

JavaScript

var done=false;
	var p=document.querySelector('p#test');
	window.setInterval(doit,4000);
	var data=0;
	doit();

	function doit() {
		p.removeAttribute('on');
		p.offsetHeight;                  //  force update
		p.innerHTML=data++;
		p.setAttribute('on',null);
	}