IE에서 CSS 전환 및 애니메이션이 작동하지 않습니다 (Firefox/Chrome에서 작동).

IE에서 작동하도록 코드를 편집하려면 어떻게해야합니까? 그것은 Firefox와 크롬에서 잘 작동합니다. Internet Explorer에서 transition 및 animation을 호출하기위한 올바른 특성을 파악할 수 없습니다.IE에서 CSS 전환 및 애니메이션이 작동하지 않습니다 (Firefox/Chrome에서 작동).

<html> 
<head> 
<title> Sample for Konstantin</title> 
<style type="text/css"> 

.text p 
{text-align:center; 
margin-left:auto; 
margin-right:auto; 
left:50%; 

} 
.text { 

    overflow: hidden; 
    margin-bottom: 110px; 
    } 

.text h1 { 
    color: black; 
    font-family: 'footlight mt light'; 
    font-size: 50px; 
    -webkit-animation-name: fade-in; 
    -webkit-animation-duration: .9s; 
    letter-spacing: -10px; 

    } 
    a { text-decoration:none } 

    .text h1 span a { 
     -webkit-transition: 0.9s ; 
       color: #9C948D; 
     } 

     .text h1:hover span a { 
      color: blue; 
      } 


</style> 
</head> 
<body> 
    <center> 

    <div class="text"><p><h1>This is a sample, <br /> 
    My Name is Matthew<br />Here is <span><a href="http://www.nba.com" >NBA Website</a>.</span><br />This is very simple<br />Here is <span><a href="http://www.facebook.com" > Facebook!</a>.</span></h1> 
</p></div> 
</body></html>

EDIT : 어쨌든 div 블록이나 비슷한 효과를내는 데 사용 하시겠습니까?

출처

2011-12-20 matture

저는 IE 9가 전환을 지원한다고 생각하지 않습니다. 편집 : [여기를 참조하십시오] (http://stackoverflow.com/questions/5103283/does-internet-explorer-support-css-transitions) –

http://www.laughingsamurai.com/ 나는 그것을보고 싶어. 이것은 IE에서 – matture

Firefox의 경우'-moz-', Opera의 경우'-o-', IE의 경우 -ms-'에서 작동합니다. 그러나 IE는 전환이나 애니메이션을 아직 지원하지 않습니다 (Rich Bradshaw의 답변 참조). – c69

IE10은 전환을 지원하는 첫 번째 IE입니다. 보통 오래된 브라우저에서 애니메이션을 무시하거나 (예전의 IE에서 종종 오래된 컴퓨터로 애니메이션이 고르지 않습니다.)

정말 필요한 경우 jQuery를 사용하여 패치하십시오. 단점은 애니메이션 색상이 jQuery에 내장되어 있지 않아서 플러그인이 필요하다는 것입니다.

출처

2011-12-20 20:52:38

CSS 속성의 "-webkit"부분에 주목하십시오. 웹킷 브라우저 (Chrome + Safari)에서만 작동합니다. IE는 "-webkit"CSS 속성을 지원하지 않습니다.

출처

2011-12-20 20:52:01 JoshStrange

IE에서 CSS 전환 및 애니메이션이 작동하지 않습니다 (Firefox/Chrome에서 작동).

답변

관련 문제