Css3 Animation springt zum letzten Keyframe auf Handy ohne Animation

Question

Ich versuche eine einfache Animation eines Becherglases zu erstellen. Alles funktioniert gut auf dem Desktop, aber sowohl iOS Safari und Chrome, springt beim Start der Animation sofort auf den letzten Keyframe (100%). Das sagt mir also, dass die Animation feuert, aber aus irgendeinem Grund will es einfach nicht gut ... animieren.

Hier ist mein scss-Code. Ich habe ein Auto-Prefixer, ich habe es überprüft und doppelt überprüft, es scheint nichts mit -webkit zu tun zu haben. Jede Hilfe wäre großartig !!

/** 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:

Nach einer letzten Versuch Sache, natürlich fand ich die Täter. Ich zeichne diesen speziellen SVG-Pfad, und wenn es fertig gezeichnet wird, ändere ich den Animations-Play-Status in "running". Hier ist meine JS:

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

Sobald ich diese Funktionalität entfernt, alles hat gut funktioniert. Ich brauche diese Animation wirklich, um zu feuern, nachdem die SVG gezeichnet wurde (aus offensichtlichen Gründen). Jede Hilfe wäre großartig.

Answer 1

Es stellt sich heraus, dass dies ein Problem damit ist, wie iOS und die mobilen Broswers den Animationsspielzustand handhaben ... Im Wesentlichen tun sie das nicht.

Die Lösung war die Klasse

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

dem Element hinzuzufügen, und diese Klasse mit js zu entfernen, wenn der richtige Zeitpunkt gekommen ist. Fühlt sich an wie ein Hack, aber es ist das einzige, was ich finden könnte, um sowohl auf dem Handy als auch auf dem Desktop zu arbeiten. Wenn jemand bessere Vorschläge hat, würde ich sie gerne hören!