Проблемы с Android / HTML5 / CSS3 Fade In

1

У меня проблема с браузером Android. Не приложение для Android, а обычная веб-страница HTML5/CSS3, включала анимацию CSS3 на основе webkit. Достаточно просто, я просто хочу, чтобы 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;

}

  • 0
    Пожалуйста, опубликуйте определение @keyframe для fadeIn и свой HTML для <section>, который вы хотите анимировать.
Теги:
browser
webkit

1 ответ

0

По-видимому, на Android не работает webkit-animation-fill-mode. Возможно, вам придется сделать работу в javascript, получив последний стиль вашей анимации и применив его к концу анимации.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню