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;
}

Answer 1

Modernizr 会更容易。只需使用 Modernizr.cssanimations。示例:

<!-- 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">');