質問: サンプルコードを作成し、挙動を確認したところ 下記のような挙動の違いが確認できました。 1. ボタン1を押す→ボタン2を押す:アニメーションが再実行される 2. ボタン3を押す→ボタン4を押す:アニメーションは再実行されない(ボタン3を押す前と同じ表示) display属性とvisibility属性は、両方とも要素を表示/非表示にするものと認識しておりました。 (visibility属性を利用した場合はdisplay属性と異なり、要素の高さ、幅がそのままで空白が詰められない、ということも認識しております) しかし、このサンプルコードのようにアニメーションの実行にも影響を与えるということは知らなかったので色々と調べてみましたが、そういった記載のあるページが見つけられませんでした。 display='block'時にアニメーションが再実行されるのは何故でしょうか? CSSの仕様なのでしょうか? その場合、そういった詳細な仕様はどこに書いてあるものでしょうか? 参考になるページや書籍等がありましたらご紹介頂きたいです。 また、displayのnone/blockでは動作しないが、 visibilityのhidden/visible切替時に動作するようなCSSの属性(?)もあるのでしょうか? もしご存知の方がいらっしゃいましたら、ご教示いただければ幸いです。 よろしくお願い致します。 ``` 1234567890 display属性で切替 ボタン1(display=none) ボタン2(display=block) visibility属性で切替 ボタン3(visibility=hidden) ボタン4(visibility=visible) ```
回答: > > display='block'時にアニメーションが再実行されるのは何故でしょうか? > > > CSSの仕様にそのとおりに定義されています. > > Setting the display property to none will terminate any running animation applied to the element and its descendants. If an element has a display of none, **updating display to a value other than none will start all animations applied to the element by the animation-name property**, as well as all animations applied to descendants with display other than none. > > > 意訳: `display:none`が設定されているノードの`display`プロパティを`none`以外の値にすると, そのノードに設定されている全てのCSSアニメーションが実行されるよ.