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のプレフィックスを削除するようにコードをクリーンアップ。私は、アニメーション名を'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>