javascript - modernizr CSS3 アニメーションを swf にフォールバック

Question

現時点では、かなり優れた CSS3 アニメーションがありますが、CSS3 アニメーションをサポートしていないブラウザー (IE8 がターゲット) にはフォールバック オプションを提供する必要があります。

考えやすくするために modernizr を使用する必要がありますが、ブラウザーが CSS アニメーションをサポートしているかどうかを確認する方法がわかりません。代わりにswf.

以下の 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;
}