跳出動畫？

所以我有一個方框.box。無限地重複旋轉動畫。跳出動畫？

@keyframes spin { 
    0% {transform:rotate(0deg);} 
    100% {transform:rotate(360deg);} 
}

盒子的第二類名是運行

.box.running { 
    animation-name:spin;

當動畫只適用

這樣做的目的是爲了讓我可以輕鬆地通過JavaScript停止動畫。（通過刪除第二個類名稱）。

我希望它能夠從動畫中的任何位置平滑過渡回到現在的正常旋轉0deg。

任何幫助將不勝感激。

來源

2017-08-07 Gage Hendy Ya Boy

使用JavaScript來創建一個新的關鍵幀。將0％設置爲當前位置，將100％設置爲0deg，並根據兩者之間的差異計算動畫持續時間需要多長時間。 –

@Our_Benefactors謝謝！我一直在尋找不同的方法來即時創建關鍵幀，但它們看起來都很健壯。這是唯一的解決方案嗎？我覺得有可能是一個更簡單的方法來做到這一點.. –

我有一個解決方案，主要是CSS！ – Ivan

我設法使它使用CSS。 JS允許我們切換類名。您必須爲動畫使用兩個類別：一個將使div旋轉（.spin），另一個將終止旋轉（.end）。兩者使用相同的@keyframes，具有相同的速度和線性。

.spin具有無限
.end的持續時間具有0.5s的

的持續時間基本上當JS腳本（按下按鈕時）類.end被添加到div因此.spin的被.ends覆蓋，允許它將div旋轉回原來的位置。

var a = function() { 
 

 
    document.querySelector('.box').setAttribute('class', 'box spin end') 
 

 
} 
 

 
document.querySelector('#end').onclick = function() { 
 
    a() 
 
}

@keyframes spin { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: purple; 
 
    animation-fill-mode: backwards; 
 
} 
 

 
.spin { 
 
    animation: spin 2s infinite linear; 
 
} 
 

 
.end { 
 
    animation: spin 2s 0.5s linear; 
 
}

<div class="box spin"></div> 
 

 
<br> 
 

 
<button id="end">STOP SPIN</button>

也不要忘記的.box財產animation-fill-mode設置爲backwards

來源

2017-08-07 21:20:49 Ivan

這是完美的！謝謝！ –

@GageHendyYaBoy太棒了！我不太確定它只會用CSS，我很高興它。 – Ivan

回答

相關問題