CSSでボタンを押したときanimation-durationを変えたいが、Chromeだけ反応しない。原因と対策がわかる方教えてください。

Question

CSSのアニメーションを用いて、ボールをはねさせるゲームを作りました
testページ

上のメニューの星の多さで速度を変えられますが、
Chromeのみメニューを選択してからWebページを更新する必要があり
原因と対策方法がわからなくて困っています。

-webkit-つけたり、いろいろ試してみましたが動きませんでした。

またスクリプトを用いずに実装したいので、
CSSとHTMLのみで解決していただけると幸いです。

Answer 1

ソースを少し触ってみましたが、-webkit-animation: none; として、一旦アニメーション停止させてからでないと動かないようですね。
仕様かバグかわかりませんが、CSSだけだと以下を追加するような次善の策しかないのではないかと思いました。

.tabBtn:hover ~ .ball {-webkit-animation: none;}

Comments

[lovesana]

なるほど、いったん停止してから再度動かす方法で回避できるんですね！
ありがとうございます！

Answer 2

どういうわけか、Chromeだけは:targetの兄弟セレクタがうまく切り替わらないようですね。

どうしてもJavaScriptなしにこだわるのであれば、上のヘッダを見えないinput[radio]+見えるlabelに切り替えて、:selectedを拾うようにすれば動くかもしれません。

Comments

[lovesana]

なるほど、radioボタンでの制御に変えたら動くかもしれないですね！
ありがとうございます！