Is it possible to have an effect of flowing flame around a div border
css
Solution
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>
Problem
I just happen to recall a graphic effect which I saw many years ago in a Windows Mobile Phone. It is a list of items, when you select one of them, there will be a flame flowing around the selected item. I have done a quick research about animation effects in css3 and found some properties which might be useful e.g. keyframes, transition, animation-* etc. But I still have no idea how to use them together to present that effect. It will be very cool, if someone could help me out and show me the effect in jsfiddle. Thank you in advance.