Анимация HTML5 под Android: исчезающие элементы

Question

Я работаю так же, как независимый разработчик веб-сайтов / websedigner, и я застрял с баннерами HTML5 на телефонах Android.На iOS-телефонах и планшетах, Chrome или Safari, он работает отлично.Но с Android анимации выглядят хорошо, но исчезают одна за другой ...

Я тестировал на телефоне Galaxy, все было в порядке, но с LG Optimus ошибка была здесь.Можете ли вы самостоятельно протестировать эту ссылку на своем телефоне Android и сообщить мне, согласны ли вы с ошибкой?

http://sebastien -baudrier.com / freelance / android /

Мой код анимации (вы можете посмотреть исходный код страницы, я поместил все на html-страницу):

.bannerHtml5 #text1,.bannerHtml5 #text2,.bannerHtml5 #icon1,.bannerHtml5 #icon2,.bannerHtml5 #icon3,.bannerHtml5 #icon4,.bannerHtml5 #icon5,.bannerHtml5 #button {
    opacity: 0;
    -webkit-animation-duration: 3s;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: both; 
    -webkit-animation-name: fadein;
    -webkit-animation-iteration-count:1;
    /*-webkit-animation: fadein 3s linear 0 2 alternate;*/
}
@-webkit-keyframes fadein { 
    from {opacity: 0;} to {opacity: 1;}
}

.bannerHtml5 #icon1 {-webkit-animation-delay: 0.5s;}
.bannerHtml5 #icon2 {-webkit-animation-delay: 0.8s;}
.bannerHtml5 #icon3 {-webkit-animation-delay: 1.1s;}
.bannerHtml5 #icon4 {-webkit-animation-delay: 1.4s;}
.bannerHtml5 #icon5 {-webkit-animation-delay: 1.7s;}
.bannerHtml5 #text2 {-webkit-animation-delay: 3s;}
.bannerHtml5 #button {-webkit-animation-delay: 3.5s;}

Answer 1

Добро пожаловать в удивительный мир CSS3-анимации на Android!

Если ваша проблема связана с анимированными элементами, мерцающими внутри и вне поля зрения, добавьте это правило CSS к анимируемому элементу:

-webkit-backface-visibility: hidden

Имейте в виду, что на старых телефонах Android (до 4.0) элементы исчезнут после завершения анимации, если вы анимируете более одного свойства. Убедитесь, что вы одновременно анимируете только одно свойство.

Кроме того, в целом анимация на мобильных устройствах (включая Android) работает лучше, обеспечивая использование аппаратного ускорения. Поскольку аппаратное ускорение включено только для 3d-анимации, вы можете «форсировать» 3d-анимацию, добавив следующее правило CSS к анимируемому элементу:

-webkit-transform: translateZ(0)

Также учтите, что если вы поместите свое приложение в собственный контейнер для распространения в Google Play, вам потребуется включить аппаратное ускорение в вашем AndroidManifest.xml для Android 3.0 +:

<application android:hardwareAccelerated="true">

Это все проблемы, с которыми я столкнулся при разработке приложения HTML5 для Android с использованием PhoneGap.

Я нашел следующие сообщения в блоге невероятно полезными:

• http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-animations-the-hiccups-and-bugs-youll-want-to-avoid/
• http://daneden.me/2011/12/putting-up-with-androids-bullshit/