如何觸發一個CSS動畫？

Question

我被困在試圖觸發一個CSS動畫。

我的CSS：

h3[id="balance-desktop"]{ 
    color: black; 

    -webkit-animation-name: gogreen; 
    -webkit-animation-duration: 2s; 
    animation-name: gogreen; 
    animation-duration: 2s 
} 

/* Safari 4.0 - 8.0 */ 
@-webkit-keyframes gogreen { 
    from {color: black;} 
    to {color: limegreen;} 
    from{color: limegreen;} 
    to{color: black;} 
} 

/* Standard syntax */ 
@keyframes gogreen { 
    from {color: black;} 
    to {color: limegreen;} 
    from{color: limegreen;} 
    to{color: black;} 
} 

這是改變h3[id=balance-desktop]元素的顏色簡單的動畫。

動畫在頁面加載時起作用。我試圖讓它在我調用我的Java腳本函數時工作，但我無法工作。

嘗試＃1：

function showGreenAmiamtion(){ 
    var test = document.getElementById("balance-desktop"); 
    test.style.webkitAnimationName = 'gogreen'; 
    test.style.webkitAnimationDuration = '4s'; 
} 

嘗試＃2：

function showGreenAmiamtion(){ 
    document.getElementById("balance-desktop").style.webkitAnimationName = ""; 
    setTimeout(function() 
    { 
     document.getElementById("balance-desktop").style.webkitAnimationName = "gogreen"; 
    }, 0); 
} 

我嘗試了所有的答案來自How to activate a CSS3 (webkit) animation using javascript?，沒有運氣。

我的代碼有問題嗎？

Answer 1

你嘗試2期工程 - 只要清理你的代碼有點刪除WebKit的前綴（這是幾年過時）。我將animationName設置爲'none'內嵌，然後將其刪除，以便元素返回使用其原始CSS動畫名稱。

此外，在關鍵幀動畫中有多個from和to將不起作用，所以我將其格式化爲使用百分比。

var btn = document.getElementById("button"); 
 
var text = document.getElementById("balance-desktop"); 
 

 
function turngreen() { 
 
    text.style.animationName = 'none'; 
 
    setTimeout(function() { 
 
    text.style.animationName = null; 
 
    }, 0); 
 
} 
 

 
btn.addEventListener('click', turngreen);

#balance-desktop { 
 
    color: black; 
 
    animation: gogreen 2s; 
 
} 
 

 
@keyframes gogreen { 
 
    0%, 100% { color: black; } 
 
    50% { color: limegreen; } 
 
}

<h3 id="balance-desktop">Heading</h3> 
 

 
<button id="button">Turn Green</button>

Answer 2

對於這樣的事情，CSS Transition可能更簡單。

此外，所有主流瀏覽器現在都支持CSS3動畫和轉換，因此除非您的目標是舊瀏覽器，否則您可以刪除供應商前綴。

// Get DOM references: 
 
var btn = document.querySelector("button"); 
 
var h3 = document.querySelector(".balance-desktop"); 
 

 
// Set up trigger for transition function. This is a button 
 
// click in this example, but the function can be called anytime 
 
// you like. 
 
btn.addEventListener("click", function(){ 
 

 
    // By changing a style property on the element that had previously 
 
    // been set, and if that element has been set up for transitions 
 
    // on that property, the transition will be activated. 
 
    h3.classList.add("goGreen"); 
 
    
 
    // After the transition to the new style is complete 
 
    // we'll remove that style, effectively causing a 
 
    // transition back to the original style. It's important 
 
    // that the delay is set to at least the time of the transition. 
 
    // Two seconds in this case. 
 
    setTimeout(function(){ 
 
    h3.classList.remove("goGreen"); 
 
    },2000); 
 
});

.balance-desktop{ 
 
    color: black; 
 
    /* Set the element to transition on all properties 
 
     that have been set over the course of 2 seconds. */ 
 
    transition:2s all; 
 
} 
 

 
.goGreen { 
 
color: limegreen; 
 
}

<h3 class="balance-desktop">Hello</h3> 
 
<button>Run Function</button>