Проблема с анимацией CSS3 на веб-сайте Android - количество итераций и «вперед» не останавливают анимацию

Я использую некоторые 2D-преобразования CSS3 для анимации меню для веб-приложения для Android.

Я вставляю параметры анимации с помощью Javascript, поскольку они применяются только после запуска функции ontouchstart.

Вот javascript для первой части анимации в качестве примера:

function d1(){
        var d1=document.getElementById('d1');
        d1.style["-webkit-animation"] = "slide1";
        d1.style["-webkit-animation-duration"] = "3s";
        d1.style["-webkit-animation-iteration-count"] = "1";
        d1.style["-webkit-animation-fill-mode"] = "forwards";
        }

Вот CSS3 для анимации slide1:

     @-webkit-keyframes slide1 {
       0%{-webkit-transform:translateY(0) scaleY(0);}
       100%{-webkit-transform:translateY(122px) scaleY(1);}
     }

Этот код правильно отображает анимацию, однако после завершения каждого состояния анимации он исчезает. Из того, что я прочитал, это должно быть решено с помощью -webkit-animation-fill-mode:forwards или -webkit-animation-iteration-count:1, но ни один из них, похоже, не останавливает/приостанавливает анимацию после ее воспроизведения.

Кто-нибудь еще сталкивался с подобной проблемой на Android? Пожалуйста помоги. Спасибо


android css css-transforms
person tcnarss    schedule 26.10.2011    source источник

Ответы (2)


arrow_upward
3
arrow_downward

просто добавьте это в свой CSS. Android не любит быть вложенным или сокращенным. Я попробовал это, и у меня это сработало, и именно так я делаю всю свою анимацию webKit.

@-webkit-keyframes slide1 {
    -webkit-transform: translateY(122px);
    -webkit-transform: scaleY(1);
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 3s;
}
person Community    schedule 15.03.2012
comment
Эта проблема решена в Android 4, но простое определение forwards в отдельном объявлении -webkit-animation-fill-mode делает свое дело в коде и таблицах стилей. - person Klemen Slavič; 26.10.2012

arrow_upward
0
arrow_downward

Вы исследовали, возвращается ли ваша анимация к стадии 0%, например. установка начального масштаба Y на 0,25 или около того?

Кроме того, вы можете протестировать все возможные режимы заполнения (ни один/вперед/назад/оба), чтобы увидеть, действует ли это.

Кроме того, рекомендуется (для лучшей производительности) использовать translate3d() вместо translateX/Y.

person Samuli Hakoniemi    schedule 26.10.2011