9

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.

5 Answers 5

11

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>
0
4

For people looking for a little flame effect using CSS, here's one that I found cool. This may not answer the OPs question, but I'll just post it heresince it can come handy for someone else.

<div class="container">
  <div class="red flame"></div>
  <div class="orange flame"></div>
  <div class="yellow flame"></div>
  <div class="white flame"></div>
  <div class="blue circle"></div>
  <div class="black circle"></div>
</div>
body{
  background:black;
}

.container{
  margin:80px auto;
  width: 60px;
  height: 60px;
  position:relative;
  transform-origin:center bottom;
  animation-name: flicker;
  animation-duration:3ms;
  animation-delay:200ms;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.flame{
  bottom:0;
  position:absolute;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  transform:rotate(-45deg) scale(1.5,1.5);
}

.yellow{
  left:15px; 
  width: 30px;
  height: 30px;
  background:gold;
  box-shadow: 0px 0px 9px 4px gold;
}

.orange{
  left:10px; 
  width: 40px;
  height: 40px;
  background:orange;
  box-shadow: 0px 0px 9px 4px orange;
}

.red{
  left:5px;
  width: 50px;
  height: 50px;
  background:OrangeRed;
  box-shadow: 0px 0px 5px 4px OrangeRed;
}

.white{
  left:15px; 
  bottom:-4px;
  width: 30px;
  height: 30px;
  background:white;
  box-shadow: 0px 0px 9px 4px white;
}

.circle{
  border-radius: 50%;
  position:absolute;  
}

.blue{
  width: 10px;
  height: 10px;
  left:25px;
  bottom:-25px; 
  background: SlateBlue;
  box-shadow: 0px 0px 15px 10px SlateBlue;
}

.black{
  width: 40px;
  height: 40px;
  left:10px;
  bottom:-60px;  
  background: black;
  box-shadow: 0px 0px 15px 10px black;
}

@keyframes flicker{
  0%   {transform: rotate(-1deg);}
  20%  {transform: rotate(1deg);}
  40%  {transform: rotate(-1deg);}
  60%  {transform: rotate(1deg) scaleY(1.04);}
  80%  {transform: rotate(-2deg) scaleY(0.92);}
  100% {transform: rotate(1deg);}
}

0

Two options come to my mind. The first one is a bit difficult and may produce results that aren't that satisfying, but it's CSS3 only. You can use the glow effect to simulate a fire-like efect around the borders of your DIV.

Tutorial: http://zurb.com/playground/radioactive-buttons

The other, more simpler and more satisfying option is to use a GIF. Yes you heard me. Just add DIVs around the border of your DIV with images of burning flames. You can either use 4 DIVs for each side of your element or use a single one which will be scaled - play around with it a bit and see what works for you the best.

I know it's a bit of a ghetto-like approach, but come on - you want burning flames around your HTML element :)

3
  • Hi Dropout, thank you for your help. Yes, I agree with you that use pure css is difficult, but still I'd like to go this way as it is the trend of today. As the 2nd solution, I think it's also good enough for presenting that animation effect but not very helpful in terms of catching up with the current trend(which is more CSS, less pics). I will leave this question unanswered for a while to see if there are someone who can really do the amazing effect. Anyway, we both want to see how it gets done, right? :) cheers
    – Franva
    Feb 6, 2014 at 10:20
  • 1
    Thanks for the comment, I completely agree. And yes, if someone comes with up a way to do this without using additional images around the element it will be awesome.
    – Dropout
    Feb 6, 2014 at 10:58
  • Hi Dropout, yes, as far as long all people in this question and answers are looking forward to the real COOL effect! So do I!! Hopefully this question will draw enough attention so that someone would eventually come up with a real COOL effect with only css or at least provide some bounty :)
    – Franva
    Feb 8, 2014 at 22:44
0

This might not be the effect you are looking for..it is not created using animation effects in css3. See if it helps.. this effect which is created using javascript and canvas.

JS Part:

// variables
var canvas, ctx;
var data_width;
var data_height;
var colors = [];
var out_data = [];

// new filled array function
function new_filled_array(len, val) {
    var rv = new Array(len);
    while (--len >= 0) {
        rv[len] = val;
    }
    return rv;
}

// prepare palette function
function prepare_palette() {
    for (var i = 0; i < 64; ++i) {
        colors[i + 0] = {r: 0, g: 0, b: i << 1, a: i};
        colors[i + 64] = {r: i << 3, g: 0, b: 128 - (i << 2), a: i+64};
        colors[i + 128] = {r: 255, g: i << 1, b: 0, a: i+128};
        colors[i + 192] = {r: 255, g: 255, b: i << 2, a: i+192};
    }
}

// drawing functions
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
    clear(); // clear canvas

    var data_cnt = data_width * (data_height - 1);
    for (var i = 0; i < data_width; i++) {
        out_data[data_cnt + i] = (0.7 > Math.random()) ? 255 : 0;
    }

    for (var y = 0; y < 175; y++){
        for (var x = 0; x < data_width; x++){
            var s = data_cnt + x;

            var temp_data = out_data[s] + out_data[s + 1] + out_data[s - 1] + out_data[s - data_width];
            temp_data >>= 2;
            if (temp_data > 1){
                temp_data -= 1;
            }
            temp_data <<= 0;

            out_data[s - data_width] = temp_data;

            var id = s << 2;
            img_data.data[id + 0] = colors[temp_data].r; // red
            img_data.data[id + 1] = colors[temp_data].g; // green
            img_data.data[id + 2] = colors[temp_data].b; // blue
            img_data.data[id + 3] = colors[temp_data].a; // alpha 
        }
        data_cnt -= data_width;
    }

    // draw result data
    ctx.putImageData(img_data, 0, 0);
}

if (window.attachEvent) {
    window.attachEvent('onload', main_init);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            main_init();
        };
        window.onload = newonload;
    } else {
        window.onload = main_init;
    }
}

function main_init() {

    // creating canvas and context objects
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');

    // preparing initial image data (empty)
    img_data = ctx.createImageData(canvas.width, canvas.height);

    data_width = img_data.width,
    data_height = img_data.height,

    prepare_palette();

    // allocating array with zeros
    out_data = new_filled_array(data_width * data_height, 0);

    setInterval(drawScene, 30); // loop drawScene

}

See demo here.. http://jsbin.com/qefo/6/edit

4
  • Hi newTag, thx for providing this plugin, but I found it cannot show flame around border, although there is a "Burn Borders" option. Any ideas? Cheers
    – Franva
    Feb 6, 2014 at 7:32
  • 1
    Hi newTag, really thank you for your help and time. But I think I might not describe my question clearly. What I want is a FLOWING flame AROUND the BORDER of a div, not a flame burning inside a div.When I say around the border of a div, I mean the flame should be displayed on all (left,top,right,bottom) borders OUTWARD(Try to image a burning window). I believe many StackOverFlowers are waiting for this effect as well, because it's so cool!
    – Franva
    Feb 6, 2014 at 23:11
  • 1
    @Franva Sorry, I just tried to gave a small sample help. Yes me too waiting for this effect.
    – newTag
    Feb 8, 2014 at 17:46
  • 1
    hi newTag, that's great to hear you are looking forward that COOL effect too! :) hopefully this question will draw enough attention so that someone would like to provide a bounty onto it:) I am really looking forward to the satisfactory answer and the COOL final effect!
    – Franva
    Feb 8, 2014 at 22:42
0

You can use border-image property to scale and clip the images to be your borders and animate them accordingly. Here's a sample:

body{
  margin:0;
  padding:0;
}
div{
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  margin:0;
  padding:0;
  align-items:center;
}
p{
  width:50%;
  animation:animate 8s linear forwards;
  padding:10px;
  
}

@keyframes animate{
  0%{
    border-style: solid;
border-width: 0px 0px 0px;
border-image: url(https://image.shutterstock.com/image-vector/cartoon-fire-flame-frame-borders-260nw-1362735449.jpg) 73 157 73 151 repeat stretch;
  }
  100%{
    border-style: solid;
border-width: 29px 0px 29px 0px;
border-image: url(https://image.shutterstock.com/image-vector/cartoon-fire-flame-frame-borders-260nw-1362735449.jpg) 73 157 73 151 repeat stretch;
  }
}
<body>
<div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis maxime suscipit dolorum porro eius dignissimos commodi quibusdam expedita rerum alias asperiores iste nisi animi modi eligendi quam quia, voluptas earum!</p>
</div>
</body>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.