A little fire in pure CSS (Firefox)

Having visited the home page of the Firefox browser about: home (autonomous, in the browser itself), I found there a good implementation of a blazing fire made on not very heavy animated sprites under the LGPL license (at least in the starting about-home-Fx.js ) . Not every day you will see high-quality fire on scripts in the browser. Upon closer inspection, it turned out that these were not even scripts, but entirely animated CSS. A small script is used only for start and stop. Using this idea and format, designers will be able to create their own realization of fire, smoke or flowing water.

Searching for keywords from a code on the Internet did not give a result, therefore, as with the Turing machine ( Github ), immediately there was a desire to free the script and styles from the shackles of chance and mystery. That is, put it in a readable and working form in an open stable source. Otherwise, the Olympics will end - and there will be every chance to disappear from his sight. And here is the result:
(See the only index-snap-flame.htm file in Firefox; if you wish, you can see all the elements that were on the page in index-snap-flame- originalRu.htm by downloading the entire / originalMoz folder , also with animation.)
Demo: spmbt.kodingen.com/demo/index-snap-flame.htm
(Due to the peculiarities of CSS coding, animation will only work under Firefox; if they give a pull request or fork with cross-browser code in a new file, I’ll be happy to).

The animation, of course, is imprisoned for Mozilla, but most likely, rewriting the styles will not prevent it from running on other modern browsers.

With a license and authorship - it is not very clear, except that it is a Mozillian development specifically for internal browser scripts. The starting script aboutHome.js is licensed by LGPL (3 authors, including the main one - Marco Bonardo (original author)), but the origin of the fire pattern is unclear because it had to be pulled out of the working page.

UPD: k12th made an update of styles so that they work in Chrome / Webkit , but so far they are not animated there quite so (not to say “worse”) than in Firefox. But anyway, thanks to him for the first iteration to cross-browser compatibility ( if there are more requests, I can accept it on Monday, sorry ).