1
なぜJavaScriptを使用してCSSアニメーションを繰り返すことはできませんか？JavaScriptを使用してCSSアニメーションを1回繰り返します。
フィドル：それはない 360°でとにを回転させているためhttp://jsfiddle.net/6XtSa/
A
答えて
5
ここでは、クラスを使用するように提案されている削除された回答の例を示します。その答えは無限に走ったので、アニメーションが正しく得られませんでした。
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#button.animating {
-webkit-animation-name: rotate;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
}
var btn = document.getElementById('button');
btn.addEventListener('click', function() {
this.className = 'animating';
});
btn.addEventListener('webkitAnimationEnd', function(){
this.className = '';
});
+0
はい私はそれを削除したQ：私は彼が無限のアニメーションを望んでいると思った（コーヒーはまだ蹴られていない：P） – stecb
+1
@stecb：私はあなたが正しい行にあったと思う。クラスを使用することでそれをもっときれいに保ちます。 –
0
ボタンは一度だけ回転している理由があります。それは絶対値です。再度回転させるには、360°から720°まで回転させる必要があります。答えの一つでRotating a Div Element in jQuery 、特にこのjsfiddle：あなたはこの記事を見てしたいことがありhttp://jsfiddle.net/uLrVy/
+0
どのようにリセットすればよいのですか？JavaScriptを使ってアニメーションを行う必要はありませんか？ – Tyilo
0
あなたはこのような何かを試すことができます。http://jsfiddle.net/6tZd3/
Safari CSS Visual Effects Guideによると、あなただけのwebkitTranstionEndを聞くことができますアニメーションが終了したことを通知されるイベント。その時点で、アニメーションをJavaScriptなしでリセットすることができます。
任意のアニメーションを見ることができませんでした。
アイデアは
animationendイベントが発生したときには、clickにクラスを追加し、それを削除することです！ – Kangkan@TJこれはChromeでもうまくいきますが、これはfirefoxやoperaなどの他のブラウザで-mozzilaと-oという接頭辞を付けても可能ですが、正しく返信すれば – Luke
@BubbaWoop私のコメントは削除されています。あなたは正しいですし、これは理にかなっています。これは、ChromeにもWebkitエンジンが搭載されているためです。 –