/**
* 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
}
}

SU CheshireCat

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s