Yani, -webkit-animation bu kural var:

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

Ve bazı box benim: animasyon bazı kuralları tanımlayan CSS

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

11 ** böyle #box:

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

Ama daha sonra tekrar tekrar görüyorum.

Bu sadece bir kez kutuyu sallar:

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

Nasıl aşımı veya birden çok animasyon kullanmadan yeniden harekete JavaScript ile CSS bir animasyon yapabilir miyim?

CSS3 transition tests github page cevap kaynak kodu ve örnekleri göre buldum.

Temelde, CSS animasyonlar animasyon tamamlandığında tetiklenir animationEnd bir olay var.

Y tarayıcılar için bu olay adında “webkitAnimationEnd”. Adı olmuştur sonra bir animasyon sıfırlamak için, animationEnd olay için öğesine olay-dinleyici eklemeniz gerekir.

Vanilya javascript düz:

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.
};

ve bir WordPress kullanmak:

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

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

CSS3 transition tests kaynak kodu (yukarıda) çapraz tarayıcı CSS geçişleri için yardımcı olabilecek support aşağıdaki nesne, dönüşümler ve animasyonlar.

Burada destek kodu (yeniden biçimlendirilmiş):

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;
}());

“” Her tarayıcı için. özellikleri animasyon algılamak için kod ekledim değil Bu cevap” sen bırak. “topluluk wiki yaptım :-)