Android/HTML5/CSS3 페이드 인 문제

Question

Android 브라우저와 관련하여 문제가 있습니다. 안드로이드 앱이 아니라 일반적인 HTML5/CSS3 웹 페이지는 웹킷 기반 CSS3 애니메이션과 관련이 있습니다. 간단히 말해서, 나는 div/section이 화면 상에 희미 해지 길 원한다. 아래의 방법은 iOS 브라우저에서 작동하지만 Android 브라우저에서는 작동하지 않습니다. 여기에서 일이 발생합니까 페이드하고 다음 개체 대신 화면에 튀어 나와의 사라 :

section { 
width: 480px; 
height: 100px; 
overflow: hidden; 
position: absolute; 
left: 0px; 
top: 0px; 
background-image: url(images/home/bkg.jpg); 
background-repeat: no-repeat; 
background-position: 0px 0px; 
z-index: 1; 
-o-animation-name: fadeIn; 
-o-animation-duration: 1s; 
-o-animation-delay: 0s; 
    -o-animation-fill-mode: both; 
-moz-animation-name: fadeIn; 
-moz-animation-duration: 1s; 
-moz-animation-delay: 0s; 
    -moz-animation-fill-mode: both; 
-webkit-animation-name: fadeIn; 
-webkit-animation-duration: 1s; 
-webkit-animation-delay: 0s; 
    -webkit-animation-fill-mode: both; 

}

Answer 1

은 분명히 웹킷 - 애니메이션 - 채우기 모드가 안드로이드에서 작동하지 않습니다. 자바 스크립트에서 마지막 스타일의 애니메이션을 가져 와서 애니메이션 끝에 적용해야 할 수도 있습니다.