CSS Animation with Animated GIF Fallback

CSS Animation with Animated GIF Fallback in response to this question on stackoverflow http://stackoverflow.com/questions/7460709/should-i-use-css-animations

by J. Albert Bowden

HTML

<h1>Here are two animated GIFs</h1>
<img src="http://dev.bowdenweb.com/a/i/an/preloaders.net-28-01.gif" />
<img src="http://dev.bowdenweb.com/a/i/an/preloaders.net-29-01.gif" />
<div class="box"><img src="http://dev.bowdenweb.com/a/i/an/preloaders.net-29-01.gif" /></div>
<h2 class="pix01"><b>If you see me than Animations are working</b></h2>
<h2 class="pix02"><b>I am a Fallback; I am an animated GIF</b></h2>

CSS

.box{margin:10px auto; width:128px; height:128px; 
background-image:url("http://dev.bowdenweb.com/a/i/an/preloaders.net-28-01.gif"); }

.pix01{background:url("http://dev.bowdenweb.com/a/i/an/preloaders.net-29-01.gif") 0 0 no-repeat; width:256px; height:128px}

.pix02{background:url("http://dev.bowdenweb.com/a/i/an/preloaders.net-28-01.gif") 0 0 no-repeat; width:256px; height:128px}
b{display:block; margin-left:130px; font-size:18px; line-height:1.5; height:128px; text-align:center}
.pix01 b{background-color:#000; color:#fff}
.pix01 a{background-color:#fff; color:#000}
.box2{
-webkit-animation:movingbox; -moz-animation:movingbox; animation:movingbox}
@-webkit-keyframes movingbox{ .box img{display:none} }
@-moz-keyframes movingbox{ .box img{display:none} }
@-keyframes movingbox{ .box img{display:none} }