WebKit CSS アニメーションを JavaScript で再トリガーさせるには？

質問

ということで、以下のような -webkit-animation のルールがあります。

@-webkit-keyframes shake {
    0% {
        left: 0;
    }
    25% {
        left: 12px;
    }
    50% {
        left: 0;
    }
    75% {
        left: -12px;
    }
    100% {
        left:0;
    }
}

そして、アニメーションのルールを定義するいくつかの CSS が、私の box :

#box{
    -webkit-animation-duration: .02s;
    -webkit-animation-iteration-count: 10;
    -webkit-animation-timing-function: linear;
}

私は shake は #box をこのように

document.getElementById("box").style.webkitAnimationName = "shake";

でも、後でまた振れなくなるんです。

これは一度だけ箱を振ります。

someElem.onclick = function(){
    document.getElementById("box").style.webkitAnimationName = "shake";
}

タイムアウトや複数のアニメーションを使用せずに、JavaScriptでCSSアニメーションを再トリガーするにはどうすればよいですか？

どのように解決するのですか？

のソースコードとサンプルを見て、答えを見つけました。 CSS3 transition tests githubページ .

基本的に、CSSアニメーションは animationEnd イベントがあり、アニメーションが完了すると発生します。

webkit ブラウザの場合、このイベントの名前は " webkitAnimationEnd ". したがって、アニメーションが呼び出された後にそれをリセットするためには、イベントリスナーを animationEnd イベントに対してイベントリスナーを追加する必要があります。

プレーンバニラのjavascriptで

var element = document.getElementById('box');

element.addEventListener('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
}, false);

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
    // you'll probably want to preventDefault here.
};

で、jQueryで。

var $element = $('#box').bind('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
});

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
    // you'll probably want to preventDefault here.
});

のソースコードは CSS3トランジションテスト (前述) には、以下のように support オブジェクトがあり、クロスブラウザの CSS トランジション、トランスフォーム、およびアニメーションのために役に立つかもしれません。

以下はサポートコードです (再フォーマット)。

var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style,
        // you'll probably be better off using a `switch` instead of theses ternary ops
        support = {
            transition:
                divStyle.MozTransition     === ''? {name: 'MozTransition'   , end: 'transitionend'} :
                // Will ms add a prefix to the transitionend event?
                (divStyle.MsTransition     === ''? {name: 'MsTransition'    , end: 'msTransitionend'} :
                (divStyle.WebkitTransition === ''? {name: 'WebkitTransition', end: 'webkitTransitionEnd'} :
                (divStyle.OTransition      === ''? {name: 'OTransition'     , end: 'oTransitionEnd'} :
                (divStyle.transition       === ''? {name: 'transition'      , end: 'transitionend'} :
                false)))),
            transform:
                divStyle.MozTransform     === '' ? 'MozTransform'    :
                (divStyle.MsTransform     === '' ? 'MsTransform'     :
                (divStyle.WebkitTransform === '' ? 'WebkitTransform' : 
                (divStyle.OTransform      === '' ? 'OTransform'      :
                (divStyle.transform       === '' ? 'transform'       :
                false))))
            //, animation: ...
        };
    support.transformProp = support.transform.name.replace(/([A-Z])/g, '-$1').toLowerCase();
    return support;
}());

ブラウザごとに「アニメーション」のプロパティを検出するコードは追加していません。この回答は「コミュニティwiki」にしましたので、そちらにお任せします :-)