CSS Fire Animation
Incredibly simple CSS animation, producing a very convincing fire effect.
Live demo
https://helderman.github.io/blend-fire/html5/index.html
Browser support
Works on recent versions of Google Chrome, Firefox, Microsoft Edge, Opera, Samsung Internet.
Works on Safari, but frame rate is low. Needs investigation; possibly Safari is throttling ‘unimportant’ animations in an attempt to balance the CPU load, as suggested here. For now, I’d recommend Apple users to use Firefox instead; the animation is a lot smoother there.
Does not work on Internet Explorer.
How it works
Two ‘solid noise’ images are continuously sliding along each other, blended together with ‘difference’ blend mode. A gradient is blended in to make the flames ‘die out’ as they rise. Additional filters are giving it the right contrast and color.
Video
https://www.youtube.com/watch?v=w3lhF7yMVfM
Credits
This is a fork of an earlier repo of mine, blend-smoke.
Image produced using GIMP. Thanks to Ken Perlin for the noise algorithm. This animation shows once more how versatile his noise is in modelling natural phenomena.
Thanks to Shadertoy for giving me the platform to experiment with noise algorithms. It is here that I first discovered that the sum (or difference) of two noise functions makes a great fire. Here’s a demo I made: