jquery css transfrom translate reset

Question

JavaScriptとjQueryを使用してボタンを押したときにCSSトランジションを繰り返そうとしています。 CSS、画像が設定されている：

.icon1-image { 
position: absolute; 
top: -105px; 
left: 507px; 
} 

はその後JSファイル内のクリック機能に私が翻訳しようとしている「icon-image」場所と、それが戻って2秒で元の位置にアニメーション化しています。

ので、ボタンがクリックされるたびに「icon1Image」はオーバーダウン507pxに移動してから元の位置にアニメート：

$icon1Image.css({ 
"-moz-transform":"translate(507px,507px)", 
"-webkit-transform":"translate(507px,507px)", 
"-ms-transform":"translate(507px,507px)", 
"transform":"translate(507px,507px)", 

"-moz-transition":'transform 0s ease-in', 
"-webkit-transition":'transform 0s ease-in', 
"-ms-transition":'transform 0s ease-in', 
"transition":'transform 0s ease-in', 

"-moz-transform":"translate(0px,0px)", 
"-webkit-transform":"translate(0px,0px)", 
"-ms-transform":"translate(0px,0px)", 
"transform":"translate(0px,0px)", 

"-moz-transition":'transform 2s ease-in', 
"-webkit-transition":'transform 2s ease-in', 
"-ms-transition":'transform 2s ease-in', 
"transition":'transform 2s ease-in' 

});​ 

このコードを使用して、元の変換を無視しているようです。これを達成する正しい方法は何ですか？

Answer 1

チェックこのフィドルhttps://jsfiddle.net/owhqj9c3/1/

CSS .animation {アニメーション：アニメーション2Sは使いやすさで;}

@keyframes anim { 
    0% { 
    transform:translate(507px,507px) 
    } 
    100% { 
    transform:translate(0,0) 
    } 
} 

JS

$(this).addClass("animation"); 

Answer 2

をあなたはしたくない場合CSS keyframesを使用すると、transitionendまたはjQuery .delay()を見ることができます。

transitionendは、CSSの移行が終了したときにトリガーするイベントです。あなたはそのようにそれを使用することができます。

$button 
.on('click', function(){ 

    $icon1Image 
    .one('transitionend', function(){ // .one() triggers only once 

     $(this).css({ /* reset css */ }); 

    }) 
    .css({ /* apply new css */ }); 

}); 

.delay()を使用する：

$button 
.on('click', function(){ 

    $icon1Image 
    .css({ /* apply new css */ }) 
    .delay(2000) //wait 2 seconds 
    .css({ /* reset css */ }); 

});