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

#android #css #css-transforms

#Android #css #css-преобразования

Вопрос:

Я использую некоторые 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? Пожалуйста, помогите. Спасибо

Ответ №1:

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

 @-webkit-keyframes slide1 {
    -webkit-transform: translateY(122px);
    -webkit-transform: scaleY(1);
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 3s;
}

Ответ №2:

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

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

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