CSS3 Animated Flame *

dabblet.css

/**
 * CSS3 Animated Flame *
 */

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:100px; 
    height:136px;
}

.flame {
    margin:0 auto;
    position:absolute;
    width:100px; 
    height:136px;
    background:url(http://sitepointstatic.com/examples/css3/animation/flame-sprite.png?r=3) 0px 0px no-repeat;
    animation: flicker .4s 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"></div>     
    </div>
</div>​

settings.json

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