CSS3 Animated Flame *

dabblet.css

/**
 * CSS3 Animated Flame *
 */

body {background-color:#000}
#logfire {
    position:relative;
    height:400px;
    margin-top:100px
    }
#flamegroup {
    margin:0 auto;
    position:relative;
    top:100px;
    width:100px; 
    height:22px;
}

.flame {
    margin:0 auto;
    position:absolute;
    width:25px; 
    height:22px;
    background:url(http://cooltribes.com/wp-content/uploads/2012/01/flame1.png) 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:0px -22px;        
}
    50% {
        background-position:0px -22px;
        opacity:.4
}
    50.1% {
        background-position:0px -44px;
}
    75% {
        background-position:0px -44px;
        
}
    75.1% {
        background-position:0px -22px;
}
    100% {
        background-position:0px -22px;
        opacity:.8
}
}
​

dabblet.html

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

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}