Skip to content

Instantly share code, notes, and snippets.

@alexmwalker
Created February 16, 2012 23:31
Show Gist options
  • Save alexmwalker/1848758 to your computer and use it in GitHub Desktop.
Save alexmwalker/1848758 to your computer and use it in GitHub Desktop.
CSS3 Animated Flames *
/**
* 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
}
}
<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>​
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment