box-shadowのtransitionが効かないとき

こういうの作ったんですけどね

hoverした時にふわっとアニメーションさせたくて、transitionを設定してたんですけどね。
↓こういう感じで

.c-grid-item {
  box-shadow:
    -3px -3px 12px rgba(255, 255, 255, 0.7),
    3px 3px 12px rgba(17, 17, 17, 0.3)
  ;
  transition: box-shadow ease-in-out 0.5s;
  &:hover {
    box-shadow:
      inset 3px 3px 12px rgba(17, 17, 17, 0.3),
      inset -3px -3px 12px rgba(255, 255, 255, 0.7)
    ;
  }
}

効かないんですね。この書き方。
はじめて知りました。

効く書き方

.c-grid-item {
  box-shadow:
    -3px -3px 12px rgba(255, 255, 255, 0.7),
    3px 3px 12px rgba(17, 17, 17, 0.3),
    inset 3px 3px 12px transparent,
    inset -3px -3px 12px transparent
  ;
  transition: box-shadow ease-in-out 0.5s;
  &:hover {
    box-shadow:
      -3px -3px 12px transparent,
      3px 3px 12px transparent,
      inset 3px 3px 12px rgba(17, 17, 17, 0.3),
      inset -3px -3px 12px rgba(255, 255, 255, 0.7)
    ;
  }
}

アニメーション後の動きの部分を、一括で指定しておいてtransparentで透明化しておくんですね。

おお、ふわってなってくれた😚

効かない理由？

調べてもあんまり出てこなくて、これといった理由はわからないんですが・・・

もしかしたら、hover前のbox-shadowを上書きしてしまって、元の指定がなかったことになるからかなあとも思ったんですけど、他の要素だとそんなことないので。
やっぱり違うのかも。

正しい情報教えてください😂