Fork
1
Fav
1
View
4537
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 5 lines
  • HTML 3 lines
  • CSS 52 lines

CSSで要素をアニメーションするときに、いったんアニメーションを止めて最初からアニメーションをリスタートする方法。

Ariafloat Blog - CSSアニメーションのリスタート方法

例)ボタンを押したときに、アニメーションを記述したCSSのclassを追加して要素をアニメーションするとき ・2回目以降のアニメーションは、前のclassが残っているため、アニメーションができない。 ・そこで、アニメーションの終了を検知して、classを削除する方法が考えられるが、その方法の場合、現在のアニメーションが終了するまで、次のアニメーションを始めることができない。 ・そこで、$('#element').removeClass('animationClass').addClass('.animationClass');のように、classを追加する前にclassを削除する方法が考えられるが、それでもアニメーションができない。 ・そのときにアニメーションをリスタートする方法を示します。

  • CSSアニメーションのリスタート方法
  • jQuery v2.1.0
  • CSSアニメーションのリスタート方法

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

ariafloat

Author

夢は、資産投資家になること。 ARIAが大好き。 かわいいパンツが欲しい。

Ariafloat Blog http://blog.ariafloat.com/

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by