📜 ⬆️ ⬇️

A bit of fire on pure CSS (Firefox)

Going to the Firefox about: home browser home page (standalone, in the browser itself), found there a nice implementation of blazing flames 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 meet high-quality fire on the scripts in the browser. Upon closer inspection, it turned out that these are not even scripts, but fully animated CSS. A small script is used only for starting and stopping. Using this idea and format, designers can create their own realization of fire, smoke or flowing water.

Searching for keywords from the code on the Internet did not give any result, therefore, as with the Turing machine ( Gitkhab ), there was an immediate desire to release the script and styles from the shackles of randomness 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:
github.com/spmbt/flame-animate-css-mozilla

(Watch the single index-snap-flame.htm file in Firefox; if you wish, you can view 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
(Because of the coding features, CSS animations will only work under Firefox; if they give a pull-request or fork with the cross-browser code in the new file, I’m happy to see).
')
The animation, of course, is sharpened by Mozilla, but, most likely, rewriting styles does not hurt to run it on other modern browsers.

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

UPD: k12th made an update of styles to work in Chrome / Webkit , but while they are animated there is not 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 on Monday, sorry ).

Source: https://habr.com/ru/post/149392/


All Articles