모더 나이저 CSS3 애니메이션 대체 내가 (IE8이 대상이다) 그러나 내가 CSS3 애니메이션을 지원하지 않는 브라우저를위한 대체 옵션을 제공해야하고,</p> <p>I을 오히려 좋은 CSS3 애니메이션이 현재 시간에서

Question

을 SWF합니다 하지만 모질라를 사용하면 브라우저를 CSS 애니메이션으로 지원하는지 확인하는 법을 잘 모르겠다. swf 형식으로 플래시 버전을 표시한다. 대신.

아래 CSS (경고! 프로그래머가 alot을) :

는

#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.cssanimations을 사용해주세요. 모범 :

이

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