Skip to content

Instantly share code, notes, and snippets.

@alexmwalker
Created February 16, 2012 08:08
Show Gist options
  • Save alexmwalker/1843181 to your computer and use it in GitHub Desktop.
Save alexmwalker/1843181 to your computer and use it in GitHub Desktop.
CSS3 Animated Flame *
/**
* 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=4) 0px 0px no-repeat;
animation: flicker .5s infinite;
}
@keyframes flicker { /* flame pulses */
0% {
background-position:0px 0px;
}
25% {
background-position:0px 0px;
}
25.1% {
background-position:-100px 0px;
}
50% {
background-position:-100px 0px;
}
50.1% {
background-position:-200px 0px;
}
75% {
background-position:-200px 0px;
}
75.1% {
background-position:-100px 0px;
}
100% {
background-position:-100px 0px;
}
}​
<div id="logfire">
<div id="flamegroup">
<div class="flame"></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