Css3 анимация перескакивает на последний ключевой кадр на мобильном телефоне без анимации

Я пытаюсь создать простую анимацию, напоминающую мензурку. Все отлично работает на рабочем столе, но как iOS Safari, так и хром, когда анимация запускается, он сразу переходит к последнему ключевому фрейму (100%). Итак, это говорит мне, что анимация стреляет, но по какой-то причине она просто не хочет хорошо ... анимировать.Css3 анимация перескакивает на последний ключевой кадр на мобильном телефоне без анимации

Вот мой код scss. У меня есть авто-префикс, я проверил и дважды проверил, это не похоже на -webkit. Любая помощь будет потрясающей!

/** Our Process Area Edits **/ 
&.our-process-title { 
    #our-process-svg { 
    width: rem-calc(150); 
    height: rem-calc(150); 
    margin: 50px auto; 
    transform: translateZ(0); 
    animation-name: beakerShake; 
    animation-duration: 4s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    animation-play-state: paused; 

    &.running { 
     animation-play-state: running; 
    } 

    @-webkit-keyframes beakerShake { 
     0% { -webkit-transform: rotateZ(0deg);} 
     5% { -webkit-transform: rotateZ(20deg); } 
     15% { -webkit-transform: rotateZ(-25deg); } 
     20% { -webkit-transform: rotateZ(0deg);} 
     40% { -webkit-transform: rotateZ(0deg);} 
     50% { -webkit-transform: rotateZ(5deg); } 
     55% { -webkit-transform: rotateZ(-10deg); } 
     58% { -webkit-transform: rotateZ(15deg); } 
     60% { -webkit-transform: rotateZ(0deg);} 
     65% { -webkit-transform: rotateZ(0deg);} 
     72% { -webkit-transform: rotateZ(30deg); } 
     78% { -webkit-transform: rotateZ(-35deg); } 
     85% { -webkit-transform: rotateZ(0deg);} 
     95% { -webkit-transform: rotateZ(0deg);} 
     100% { -webkit-transform: rotateZ(105deg);} 
    } 

    @keyframes beakerShake { 
     0% { transform: rotateZ(0deg);} 
     5% { transform: rotateZ(20deg); } 
     15% { transform: rotateZ(-25deg); } 
     20% { transform: rotateZ(0deg);} 
     40% { transform: rotateZ(0deg);} 
     50% { transform: rotateZ(5deg); } 
     55% { transform: rotateZ(-10deg); } 
     58% { transform: rotateZ(15deg); } 
     60% { transform: rotateZ(0deg);} 
     65% { transform: rotateZ(0deg);} 
     72% { transform: rotateZ(30deg); } 
     78% { transform: rotateZ(-35deg); } 
     85% { transform: rotateZ(0deg);} 
     95% { transform: rotateZ(0deg);} 
     100% { transform: rotateZ(105deg);} 
    }

EDIT:

Попробовав одну вещь, конечно, я нашел виновника. Я рисую этот конкретный путь svg, а затем, когда это делается, изменение состояния воспроизведения анимации для запуска. Вот мои js:

setTimeout(function(){ 
    svg.style.animationPlayState = svg.style.WebkitAnimationPlayState = 'running'; 
}, 4500);

Как только я удалил эту функциональность, все это работало нормально. Мне действительно нужно, чтобы анимация загорелась после того, как SVG нарисован (по понятным причинам). Любая помощь была бы потрясающей.

источник

2017-02-09 Paul Kirby

На самом деле, я думаю, что перерисовка из-за того, что SVG не была уже проведена, делает браузер пропускать текущую анимацию. Таким образом, вы можете позволить сначала визуализировать (ака отобразить) SVG, а затем оживить его. Это то, что делает setTimeout, так как он немного ждет, но это не «чистое» решение в любом случае –

Как насчет того, чтобы вставить свойство анимации css после выполнения SVG, а не просто настроить его состояние воспроизведения? –

Оказывается, это проблема с тем, как iOS и мобильные браузеры обрабатывают состояние воспроизведения анимации ... По сути, они этого не делают.

Решение было добавить класс

.no-animation { 
    animation: none !important; 
}

к элементу, и удалить этот класс с JS, когда настало время. Чувствует себя как хак, но это единственное, что я могу найти для работы как на мобильном, так и на рабочем столе. Если у кого-то есть лучшие предложения, я бы хотел их услышать!

источник

2017-02-16 16:11:21

Css3 анимация перескакивает на последний ключевой кадр на мобильном телефоне без анимации

ответ

Смежные вопросы