box-shoadow의transsition이 작동하지 않을 때

이렇게 하는 거지만.

설정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를 덮어써서 그런지 원래 지정이 없죠.
역시 달라.
정확한 정보를 알려주세요.😂