アニメーションなしでCss3アニメーションが最後のキーフレームに移動します

Question

ビーカーの簡単なアニメーションを作成しようとしています。デスクトップではすべてがうまくいっていますが、iOS SafariとChromeの両方で、アニメーションが開始されると直ちに最後のキーフレーム（100％）にジャンプします。だから、これはアニメーションが発射されていることを私に伝えますが、何らかの理由でアニメーションがうまくいきたくありません。

ここに私のscssコードです。私は自動接頭辞を持っています、私はチェックしてダブルチェックしました、それは - ウェブキットとは関係ないようです。どんな助けも素晴らしいだろう！

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

1つの最後の事をしようとした後、もちろん私は犯人を見つけました。私はこの特定のsvgのパスを描画しています。描画が終了したら、アニメーションの再生状態を実行中に変更します。ここに私のjsは

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

私は一度その機能をすべて正常に機能を削除しました。私は本当にこれがSVGが描かれた後に発射するアニメーションを必要とします（明白な理由のために）。どんな助けも素晴らしいだろう。

Answer 1

これは、iOSとモバイルブローワーがアニメーション再生状態を処理する方法に問題があることがわかります。本質的にはそうではありません。

溶液を要素にクラス

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

を追加し、時間が正しい場合JSと、そのクラスを削除することでした。ハックのようなものだと感じていますが、私はモバイルとデスクトップの両方で動作することがわかりました。誰かがより良い提案をしているなら、私はそれらを聞くのが大好きです！