Firefox에서만 작동하는 CSS3 애니메이션

Question

웹 페이지에서 CSS3 전환 및 애니메이션을 많이 사용하지만 파이어 폭스에서만 작동하며 다른 브라우저에서는 작동하지 않습니다. 크롬. 공급 업체 접두사를 사용하지만 아무런 차이가없는 것처럼 보입니다. 필자는 원래 줄 앞에 공급 업체 접두사가 있어야한다는 것을 알았지 만,이 시도는 성공한 결과를주지 못했습니다. 다음은 작동하지 않는 애니메이션의 한 예입니다 :

html { 
    -webkit-animation-name: fadeInLeftBig; 
    -moz-animation-name: fadeInLeftBig; 
    -o-animation-name: fadeInLeftBig; 
    animation-duration:1s; 
    animation-name: fadeInLeftBig; 
} 
@-webkit-keyframes fadeInLeftBig { 
    0% { 
     opacity: 0; 
     -webkit-transform: translateX(-2000px); 
     -moz-transform: translateX(-2000px); 
     -o-transform: translateX(-2000px); 
     transform: translateX(-2000px); 
    } 
    100% { 
     opacity: 1; 
     -webkit-transform: translateX(0); 
     -moz-transform: translateX(0); 
     -o-transform: translateX(0); 
     transform: translateX(0); 
    } 
} 
@keyframes fadeInLeftBig { 
    0% { 
     opacity: 0; 
     -webkit-transform: translateX(-2000px); 
     -moz-transform: translateX(-2000px); 
     -o-transform: translateX(-2000px); 
     transform: translateX(-2000px); 
    } 
    100% { 
     opacity: 1; 
     -webkit-transform: translateX(0); 
     -moz-transform: translateX(0); 
     -o-transform: translateX(0); 
     transform: translateX(0); 
    } 
} 

Answer 1

작동하지만 애니메이션의 지속 시간이 다른 브라우저 0 초를 추가, 당신 때문에 크롬 및 사파리와 함께 작동하려면 접두사 -webkit을 추가하지 않았습니다.

은 그래서

html{ 
    ..... 
    animation-duration:1s; 
    -webkit-animation-duration: 1s; 
} 

해야하거나 그래서

html{ 
    -webkit-animation: fadeInLeftBig 1s; 
    animation: fadeInLeftBig 1s; 
} 

Answer 2

는 -webkit 특정 키 프레임 사실

@keyframes fadeInLeftBig { 

    0% { 
    opacity: 0; 
    -webkit-transform: translateX(-2000px); 
    -moz-transform: translateX(-2000px); 
    -o-transform: translateX(-2000px); 
    transform: translateX(-2000px); 
    } 

    100% { 
    opacity: 1; 
    -webkit-transform: translateX(0); 
    -moz-transform: translateX(0); 
    -o-transform: translateX(0); 
    transform: translateX(0); 
    } 

} 
@-webkit-keyframes fadeInLeftBig { 
    0% { 
    opacity: 0; 
    -webkit-transform: translateX(-2000px); 
    -moz-transform: translateX(-2000px); 
    -o-transform: translateX(-2000px); 
    transform: translateX(-2000px); 
    } 

    100% { 
    opacity: 1; 
    -webkit-transform: translateX(0); 
    -moz-transform: translateX(0); 
    -o-transform: translateX(0); 
    transform: translateX(0); 
    } 
}