CSS3 Animated Flames *

dabblet.css

/**
 * CSS3 Animated Flames *
 */

body {background-color:#000}

#logfire {
    position:relative;
    background:url(http://sitepointstatic.com/examples/css3/animation/logfire.jpg?r=2) center top no-repeat;
    height:400px;
    margin-top:100px
    }
#flamegroup {
    margin:0 auto;
    position:relative;
    top:100px;
    width:120px; 
    height:156px;
}
.flame {
    margin:0 auto;
    position:absolute;
    width:100px; 
    height:136px;
    background:url(http://sitepointstatic.com/examples/css3/animation/flame-sprite.png?r=6) 0px 0px no-repeat;
}

#fl1 {
   animation: flicker 1.3s infinite;
    top:20px;
    left:10px
}
#fl2 {
   animation: flicker .7s infinite;
    top:10px;
    left:20px
}
#fl3 {
   animation: flicker 1.1s infinite;
}

@keyframes flicker { /* flame pulses */
    0% {
        background-position:0px 0px; 
        opacity:.8 
}
    25% {
        background-position:0px 0px;
}
    25.1% {
        background-position:-100px 0px;        
}
    50% {
        background-position:-100px 0px;
        opacity:.4
}
    50.1% {
        background-position:-200px 0px;
}
    75% {
        background-position:-200px 0px;
        
}
    75.1% {
        background-position:-100px 0px;
}
    100% {
        background-position:-100px 0px;
        opacity:.8
}
}

​

dabblet.html

<div id="logfire">
    <div id="flamegroup">
           <div class="flame" id="fl1"></div>
           <div class="flame" id="fl2"></div>
           <div class="flame" id="fl3"></div> 
    </div>
</div>​

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}