Old post, but in case anyone runs across the need in the future, here is a pure CSS solution:
https://web.archive.org/web/20200223092629/http://pag.es/fire/
and
https://web.archive.org/web/20200225162502/http://pag.es/fire/test.html
Both use the same CSS:
.fire {
animation: burn 1.5s linear infinite alternate;
}
@keyframes burn {
from { text-shadow: -.1em 0 .3em #fefcc9, .1em -.1em .3em #feec85, -.2em -.2em .4em #ffae34, .2em -.3em .3em #ec760c, -.2em -.4em .4em #cd4606, .1em -.5em .7em #973716, .1em -.7em .7em #451b0e; }
45% { text-shadow: .1em -.2em .5em #fefcc9, .15em 0 .4em #feec85, -.1em -.25em .5em #ffae34, .15em -.45em .5em #ec760c, -.1em -.5em .6em #cd4606, 0 -.8em .6em #973716, .2em -1em .8em #451b0e; }
70% { text-shadow: -.1em 0 .3em #fefcc9, .1em -.1em .3em #feec85, -.2em -.2em .6em #ffae34, .2em -.3em .4em #ec760c, -.2em -.4em .7em #cd4606, .1em -.5em .7em #973716, .1em -.7em .9em #451b0e; }
to { text-shadow: -.1em -.2em .6em #fefcc9, -.15em 0 .6em #feec85, .1em -.25em .6em #ffae34, -.15em -.45em .5em #ec760c, .1em -.5em .6em #cd4606, 0 -.8em .6em #973716, -.2em -1em .8em #451b0e; }
}
The former uses this HTML:
<em class="fire">fire!</em>
While the latter uses animation-delay
to stagger the animation:
<em class="fire">f</em>
<em class="fire" style="animation-delay: .2s">i</em>
<em class="fire" style="animation-delay: .4s">r</em>
<em class="fire" style="animation-delay: .6s">e</em>
<em class="fire" style="animation-delay: 1s">!</em>