CSS3 Animated Flame - step 1*

dabblet.css

/**
 * CSS3 Animated Flame - step 1*
 */

body {background-color:#000}
div {outline:1px dashed #f00;}
#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;
}


​

dabblet.html

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

settings.json

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