Css3動畫跳轉到最後一個關鍵幀，無需動畫

我正在嘗試構建一個翻轉的燒杯的簡單動畫。在桌面上一切都很好，但iOS Safari和chrome，當動畫開始時，它立即跳轉到最後一個關鍵幀（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);} 
    }

編輯：

試圖最後一件事後，當然我找到了罪魁禍首。我繪製了這個特定的svg路徑，然後當它完成繪製時，將動畫播放狀態更改爲運行。這是我的js：

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

一旦我刪除該功能，它一切正常。我真的需要這個動畫在svg被繪製之後觸發（出於顯而易見的原因）。任何幫助都是極好的。

來源

2017-02-09 Paul Kirby

實際上，我認爲由於SVG還沒有繪製重畫是讓瀏覽器跳過當前的動畫播放。所以你可能想先讓它渲染（又名顯示）SVG，然後爲其設置動畫。這就是setTimeout正在做的事情，因爲它等了一會兒，但這不是一個「乾淨」的解決方案 –

在SVG完成後插入css動畫屬性怎麼樣，而不是僅僅將它設置爲播放狀態來運行？ –

原來這是iOS和移動設備處理動畫播放狀態的一個問題......基本上它們不是。

的解決方案是

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

添加類的元件，並刪除類JS當時間是正確的。感覺有點像黑客，但它是我唯一能夠在移動和桌面上工作的東西。如果有人有更好的建議，我很樂意聽到他們！

來源

2017-02-16 16:11:21

Css3動畫跳轉到最後一個關鍵幀，無需動畫

回答

相關問題