Modernizr的CSS3動畫退回到SWF

Question

在當前的時間，我有一個相當不錯的CSS3動畫，但我被要求提供不支持CSS3動畫的瀏覽器後備選項（IE8作爲目標）

我我需要使用modernizr來使思考變得更容易，但是我不確定如何去檢查瀏覽器是否支持CSS動畫，如果它確實，很好，繼續，如果不是，則以swf的形式顯示Flash版本代替。

CSS以下（警告：很多孤單）：

#animation 
{ 
margin-left: auto; 
margin-right: auto; 
width: 700px; 
height: 400px; 
background:url('Images/Animation/SkyBG.png'); 
} 

#rain 
{ 
width: 700px; 
height: 300px; 
position: absolute; 
background: url('Images/Animation/RainDrop.png'); 
-webkit-animation-name: rain; 
-webkit-animation-duration: 7s; 
-webkit-animation-delay: 9s; 
opacity:0; 
} 

@-webkit-keyframes rain { 
0% {background-position: 0px 0px; opacity:0;} 
50%{opacity: 1;} 
100% {background-position: 500px 1000px, 400px 400px, 300px 300px; opacity: 0;} 
} 




#soil 
{ 
width: 700px; 
height: 150px; 
background:url('Images/Animation/BGGround.png') no-repeat; 
position: absolute; 
top: 750px; 
z-index: 5; 
} 

#items 
{ 
width:700px; 
height: 400px; 
top:623px; 
position: absolute; 
} 

#Seed1 
{ 
float:left; 
width: 60px; 
height: 110px; 
background:url('Images/Animation/Seed.png'); 
background-repeat: no-repeat; 
background-size: 25px 50px; 
margin-left: 50px; 
margin-top: 140px; 
} 

#Seed2 
{ 
float:left; 
width: 60px; 
height: 110px; 
background:url('Images/Animation/Seed2.png'); 
background-repeat: no-repeat; 
background-size: 40px 55px; 
margin-left: 50px; 
margin-top: 140px; 
} 

#Seed3 
{ 
float:left; 
width: 60px; 
height: 140px; 
background:url('Images/Animation/Seed3.png'); 
background-repeat: no-repeat; 
background-size: 65px 80px; 
margin-left: 50px; 
margin-top: 125px; 
} 

#Seed4 
{ 
float:left; 
width: 100px; 
height: 170px; 
background:url('Images/Animation/Seed4.png'); 
background-repeat: no-repeat; 
background-size: 125px 225px; 
margin-left: 50px; 
margin-top: 50px; 
} 

#Seed5 
{ 
float:left; 
width: 100px; 
height: 225px; 
background:url('Images/Animation/Seed5.png'); 
background-repeat: no-repeat; 
background-size: 125px 225px; 
margin-left: 50px; 
margin-top: 20px; 
} 





#sun { 
    width: 12.5px; 
    height: 12.5px; 
    border-radius: 50px; 
    background: red; 
position: absolute; 
    -webkit-animation: rise 10s linear 3s 1 normal both; 
-webkit-animation-delay: 21s; 
    -moz-animation: rise 10s linear 3s 1 normal both; 
    -ms-animation: rise 10s linear 3s 1 normal both; 
    -o-animation: rise 10s linear 3s 1 normal both; 
    animation: rise 10s linear 3s 1 normal both; 
z-index: 0; 
} 

@-webkit-keyframes rise { 
    0% { 
    width: 12.5px; 
    height: 12.5px; 
    left: 0%; 
    top: 50%; 
    border-radius: 50px; 
    background-color: rgba(255,0,0,1); 
    box-shadow: 0px 0px 1px 1px rgba(255,255,0,1); 
    } 
    100% { 
    width: 25px; 
    height: 25px; 
    left: 80%; 
    top: -20%; 
    border-radius: 75px; 
    background-color: rgba(255,255,0,1); 
    box-shadow: 0px 0px 45px 45px rgba(255,255,0,0.7); 
    } 
} 


@-webkit-keyframes show 
{ 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 

@-webkit-keyframes infoboxshow 
{ 
0% {opacity:0;} 
50%{opacity:1;} 
} 


#Seed1 
{ 
-webkit-animation-name: show; 
-webkit-animation-duration: 5s; 
-webkit-animation-timing-function: ease; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-direction: normal; 
-webkit-animation-delay: 0; 
-webkit-animation-play-state: running; 
-webkit-animation-fill-mode: forwards; 
z-index: 5; 
position:absolute; 
opacity:0; 
} 

#infoBox1 
{ 
width: 400px; 
height: 40px; 
background:#f5cf26; 
position: absolute; 
bottom: 475px; 
margin-left: 25px; 
border-radius: 10px; 
opacity:0; 
font-size: 24px; 
text-align: center; 
font-family: 'Lemon', cursive; 
-webkit-animation-name: infoboxshow; 
-webkit-animation-duration: 8s; 
-webkit-animation-timing-function: ease; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-direction: normal; 
-webkit-animation-delay: 0s; 
-webkit-animation-play-state: running; 
-webkit-animation-fill-mode: forwards; 
} 


#Seed2 
{ 

z-index: 15; 
position:absolute; 
left: 125px; 
opacity:0; 
-webkit-animation-name: show; 
-webkit-animation-duration: 3s; 
-webkit-animation-timing-function: ease; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-direction: normal; 
-webkit-animation-delay: 8s; 
-webkit-animation-play-state: running; 
-webkit-animation-fill-mode: forwards; 
} 

#infoBox2 
{ 
width: 400px; 
height: 40px; 
background:#f5cf26; 
position: absolute; 
bottom: 475px; 
margin-left: 25px; 
border-radius: 10px; 
opacity:0; 
font-size: 24px; 
text-align: center; 
font-family: 'Lemon', cursive; 
-webkit-animation-name: infoboxshow; 
-webkit-animation-duration: 8s; 
-webkit-animation-timing-function: ease; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-direction: normal; 
-webkit-animation-delay: 8s; 
-webkit-animation-play-state: running; 
-webkit-animation-fill-mode: forwards; 
} 


#Seed3 
{ 
-webkit-animation-name: show; 
-webkit-animation-duration: 3s; 
-webkit-animation-timing-function: ease; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-direction: normal; 
-webkit-animation-delay: 16s; 
-webkit-animation-play-state: running; 
-webkit-animation-fill-mode: forwards; 
z-index: 15; 
position:absolute; 
left: 250px; 
opacity:0; 
} 

#infoBox3 
{ 
width: 400px; 
height: 100px; 
background:#f5cf26; 
position: absolute; 
bottom: 425px; 
margin-left: 25px; 
border-radius: 10px; 
opacity:0; 
font-size: 24px; 
text-align:center; 
font-family: 'Lemon', cursive; 
-webkit-animation-name: infoboxshow; 
-webkit-animation-duration: 8s; 
-webkit-animation-timing-function: ease; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-direction: normal; 
-webkit-animation-delay: 16s; 
-webkit-animation-play-state: running; 
-webkit-animation-fill-mode: forwards; 
} 


#Seed4 
{ 
-webkit-animation-name: show; 
-webkit-animation-duration: 2s; 
-webkit-animation-timing-function: ease; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-direction: normal; 
-webkit-animation-delay: 24s; 
-webkit-animation-play-state: running; 
-webkit-animation-fill-mode: forwards; 
z-index: 15; 
position:absolute; 
left: 350px; 
opacity:0; 
} 

#infoBox4 
{ 
width: 400px; 
height: 70px; 
background:#f5cf26; 
position: absolute; 
bottom: 450px; 
margin-left: 25px; 
border-radius: 10px; 
opacity:0; 
font-size: 24px; 
text-align:center; 
font-family: 'Lemon', cursive; 
-webkit-animation-name: infoboxshow; 
-webkit-animation-duration: 7s; 
-webkit-animation-timing-function: ease; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-direction: normal; 
-webkit-animation-delay: 24s; 
-webkit-animation-play-state: running; 
-webkit-animation-fill-mode: forwards; 
} 


#Seed5 
{ 
-webkit-animation-name: show; 
-webkit-animation-duration: 2s; 
-webkit-animation-timing-function: ease; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-direction: normal; 
-webkit-animation-delay: 31s; 
-webkit-animation-play-state: running; 
-webkit-animation-fill-mode: forwards; 
z-index: 15; 
position:absolute; 
left: 500px; 
opacity:0; 
} 

#infoBox5 
{ 
width: 400px; 
height: 100px; 
background:#f5cf26; 
position: absolute; 
bottom: 425px; 
margin-left: 25px; 
border-radius: 10px; 
opacity:0; 
font-size: 24px; 
text-align:center; 
font-family: 'Lemon', cursive; 
-webkit-animation-name: infoboxshow; 
-webkit-animation-duration: 10s; 
-webkit-animation-timing-function: ease; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-direction: normal; 
-webkit-animation-delay: 31s; 
-webkit-animation-play-state: running; 
-webkit-animation-fill-mode: forwards; 
} 

Answer 1

Modernizr的會更容易些。只需使用Modernizr.cssanimations。 的Exemplar：

<!-- ET CETERA --> 
<head> 
<!-- ET CETERA --> 
<script type="text/javascript" src="modernizr.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script> 
    if (!Modernizr.cssanimations) { 
     /* use jQuery to replace CSS3 animations with SWF 
      you may want to use JavaScript, but jQuery is just easy for me 
     */ 
    } 
</script> 
</head> 
<!-- ... --> 

對於清潔方面，在if語句，使用jQuery追加了不同的樣式表，例如：

$('head').append('<link rel="stylesheet" type="text/css" href="ie8-alternative.css">');