Is it possible to transition from an inset box-shadow to a regualr box-shadow?

Question

This might not make sense out of context, but I'm working on something where I would like there to be an inset box-shadow which transitions to a normal box-shadow. The transition works without the inset, but breaks with. Possible or not?

.foo{
  height: 20rem;
  width: 20rem;
  box-shadow: inset 4px 0px 4px grey,
    inset -4px 0px 4px grey;
  background: cornsilk;
  &:hover{
     box-shadow: 1px 9px 4px 9px grey;
    transition: box-shadow 1s;
  }
}

https://codepen.io/bobam/pen/ZEWBeJp

Answer 1

The direct transition for the box-shadow inset to regular is not possible. But, there is one hack that can give a closer effect.

Consider the following css:

.foo {
    width: 50px;
    height: 50px;
    border: 1px solid #aaa;
    box-shadow: inset 0 0 10px #aaa;
    animation: boxShadowOut 1s;
}
.foo:hover {
    box-shadow: 0 0 10px #aaa;
    animation: boxShadowIn 1s;
}
    
@keyframes boxShadowIn {
    0% { box-shadow: inset 0 0 10px #aaa; }
    50% { box-shadow: none; }
    100% { box-shadow: 0 0 10px #aaa; }
}
    
@keyframes boxShadowOut {
    0% { box-shadow: 0 0 10px #aaa; }
    50% { box-shadow: none; }
    100% { box-shadow: inset 0 0 10px #aaa; }
}

<div class="foo"></div>