css - 複数のボックス シャドウを要素に追加し、そのうちの 1 つだけにトランジションを適用するにはどうすればよいですか?

Question

次を使用して、要素に複数のボックスシャドウを追加できることを知っています。

box-shadow: inset 1px 1px 3px #000000, 1px 1px 3px #FF0000;

しかし、そのうちの 1 つだけにトランジションを適用するにはどうすればよいでしょうか?

Answer 1

このためには、変更されていない影を含むすべてのを明示的にリストし、それらすべてをアニメーション化する必要があります (それらの一部/ほとんどに変更がないにもかかわらず)。何も変化しないアニメーションは、少なくともアニメーション化されていないように見えます。裏方はともかく。box-shadowtransition

デモ用CSS:

div {
    box-shadow: inset 1px 1px 3px #000000, 1px 1px 3px #FF0000;
    transition: box-shadow 1s linear;
}

div:hover {
    box-shadow: inset 1px 1px 3px #000000, 1px 1px 10px #FF0000;
    transition: box-shadow 1s linear;
}

(シンプル) JS Fiddle デモ.

残念ながら、個人の に名前を付けたり識別したりする方法はまだありません (私が知る限り、そうする予定もありません) box-shadow。