停止在 css 上旋轉動畫

Question

我想知道如何在沒有按鈕點擊交互的情況下在隨機位置平滑地停止我的旋轉動畫 (css)。

span.glyphicon-arrow-up {
position: absolute;
top: 31%;
left: 36%;
margin:-60px 0 0 -60px;
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation-iteration-count: 2;
animation:spin 2s linear infinite;
font-size: 14.0em;

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

我希望你們能幫助我。 （我對 javascript 一無所知）

Answer 1

首先創建第二個 CSS 類來應用動畫。 然后使用getComputedStyle計算和設置元素的旋轉並在觸發事件時移除動畫類。 您如何觸發事件取決於您； 為了速度和簡單起見，我只使用了一個click事件，但您可以設置一個隨機生成的延遲超時來觸發它，而無需任何用戶交互。 我還為不支持將其設置為initial的transform屬性的瀏覽器提供了后備。

 document.querySelector("div").addEventListener("click",function(){ this.style.transform=window.getComputedStyle(this).getPropertyValue("transform")||"initial"; this.classList.remove("spin"); });

 div{ background:#000; height:50px; width:50px; } .spin{ animation:spin 2s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } body,html{height:100%;}body{align-items:center;display:flex;justify-content:center;}

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

請注意，我目前在一台沒有安裝任何瀏覽器的機器上，仍然需要為transform屬性添加前綴。 在我的測試中，帶前綴的屬性被getComputedStyle轉換為不帶前綴的屬性，但我不確定這是否是該函數的特性，還是因為瀏覽器不需要帶前綴的版本。 如果您注意到這在需要以transform為前綴的瀏覽器中不起作用，那么您將需要提供進一步的回退。 下面是經過編輯的 JavaScript 函數，包括您可能需要的完整列表：

document.querySelector("div").addEventListener("click",function(){
  var style=window.getComputedStyle(this);
  this.style.transform=style.getPropertyValue("transform")||style.getPropertyValue("-webkit-transform")||style.getPropertyValue("-ms-transform")style.getPropertyValue("-moz-transform")||"initial";
  this.classList.remove("spin");
});