JSFiddle - React, Tailwind, and code Playground

HTML

<p>Please, <a href="#" id='lol'>show</a> or <a id="lol2" href="#">hide</a> the following SVG with SMIL animation <strong>(with Firefox 25/26, the first click on show do nothing)</strong>.</p>

	<div style="background-color:black;">
		<div style="height:200px;" id="div"></div>
	</div>

	<p style="margin:20px 30px;">The SVG SMIL animation works everytime <strong>only with Firefox 4 to 17</strong>. I have tested this with:
	<br />- Firefox: 4, 5, 10, 16, 17, 18, 20, 21, 22, 23, 24, 25
	<br />- Chrome: 6, 14, 25, 26, 27, 28, 29, 30
	<br />- Opera: 15, 16, 17
	<br />- Safari: 5.1</p>

	<ul style="margin:0; font-size:0.9em;">
		<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=843308">Issue 843308, Animated CSS background image doesn't restart animation when background property is cleared &amp; then re-set (bugzilla.mozilla.org)</a></li>
		<li><a href="http://code.google.com/p/chromium/issues/detail?id=177277">Issue 177277, SVG as CSS background not restart SMIL animation (code.google.com)</a></li>
		<li><a href="http://stackoverflow.com/q/19177571">Restart background SVG animation (stackoverflow.com)</a></li>
	</ul>

JavaScript

$("#lol").click(function(){
    var lol = "url('http://www.luigifab.info/public/svg-smil/error.svg.php?w=200&h=200&lol=" + String(Math.floor((Math.random()*100)+1)) + "') center"
    $("#div").css('background',lol);
});
$("#lol2").click(function(){
    $("#div").css('background','none');
});