完成無限的迭代週期，並停止與CSS

動畫我有了一個動畫無限重複計數：完成無限的迭代週期，並停止與CSS

.spinner { 
    animation: spinnerAnimation 2s linear infinite; 
}

我想是可以使動畫完成當前動畫循環，並停止其上的按鈕單擊（不是真的點擊一個按鈕，但這是爲了讓事情更容易理解）：

$("button").click(function() { 
    $(".spinner").addClass("stop"); 
})

這會stop類添加到微調：

.spinner.stop { 
    -webkit-animation-iteration-count: 1; 
    animation-iteration-count: 1; 
}

它不工作非常順利，但我不太在這種情況下關心平滑：

http://codepen.io/Deka87/pen/OXZvdm

唯一的問題是，這不會停止在IE邊緣動畫即在IE中不起作用（支持動畫的版本）。有任何想法嗎？

PS：animation-play-state: pause;不是我所需要的，因爲這不會使動畫完成當前動畫週期，但在當前位置暫停它來代替。

PSS：我真的在尋找一個只有CSS的解決方案，也就是使其在.spinner.stop{}內工作。

來源

2016-08-25 sdvnksv

U可以嘗試添加里面的樣式屬性元素 –

@ Deka87，你檢查了答案嗎？ – Dekel

@德克爾，謝謝你的回答，德克爾！是的，那就是我需要的！ – sdvnksv

你有一個問題，你的關鍵幀名字的名字 - spinnerAnimation VS preloaderAnimation
我能夠設置IE停止動畫的唯一辦法是設置animation: none;的.stop類中：

$("button").click(function() { 
 
    $(".spinner").addClass("stop"); 
 
})

.spinner { 
 
    width: 30px; height: 30px; 
 
    background: green; 
 
    animation: spinnerAnimation 2s linear infinite; 
 
} 
 

 
.spinner.stop { 
 
    -webkit-animation-iteration-count: 1; 
 
    animation: none; 
 
} 
 

 
button { 
 
    margin-top: 20px; 
 
} 
 
@-webkit-keyframes spinnerAnimation { 
 
    0% { 
 
    -webkit-transform: rotate(0); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
} 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="spinner"></div> 
 
<button>Stop spinner</button>

來源

2016-08-25 15:43:04 Dekel

完成無限的迭代週期，並停止與CSS

回答

相關問題