How to apply a web-transition from inset to outer box-shadow on a div box?

Question

I am trying to work on a web transition which starts with inset box-shadow to ends at outer box-shadow. The below jsfiddle shows the example.The problem is normal inset to none box-shadow web-transition works but inset to outer doesn't work.

http://jsfiddle.net/xq4qc/

HTML

<div class="greyrow"> 
    good transition
    </div>
<br/>
<br/>
<div class="whiterow"> 
    no transition
    </div>

CSS

.greyrow{
height:100px;
width:250px;
padding:10px;
border:1px solid #CCCCCC;
margin-bottom: 10px;
-moz-box-shadow: inset 0 0 10px #aaa;
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inner 0 0 10px #aaa;
}

.greyrow:hover{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: -webkit-box-shadow 1s;
    -moz-transition: -moz-box-shadow 1s;
    -o-transition: -o-box-shadow 1s;
    transition: box-shadow 1s;


}

.whiterow{
height:100px;
width:250px;
padding:10px;
border:1px solid #CCCCCC;
margin-bottom: 10px;
-moz-box-shadow: inset 0 0 10px #aaa;
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inner 0 0 10px #aaa;
}

.whiterow:hover{

-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
box-shadow: 0 0 10px #aaa;
-webkit-transition: -webkit-box-shadow 2s;
    -moz-transition: -moz-box-shadow 2s;
    -o-transition: -o-box-shadow 2s;
    transition: box-shadow 2s;


}

Answer 1

You can do it with transitions.

The trick is that the transition has to be on numeric values, not on a keyword.

So, you need to specify the normal state as 2 shadows, 1 inset and the other outer, and one of them set at 0 (so it is invisible):

.keyframe {
    box-shadow: inset 0 0 60px red, 0 0 0px blue;
    transition: box-shadow 5s;
}

I have set huge values for the size and the time so it is more visible. then the hovered state is:

.keyframe:hover {
    box-shadow: inset 0 0 0px red, 0 0 60px blue;
}

Note that there is a correspondence between the shadows, so that the browser only needs to transition a numeric value (it could be all the data; but the 'inset' keyword).

fiddle

.keyframe {
    box-shadow: inset 0 0 10px #aaa;
    height:100px;
    width:250px;
    padding:10px;
    margin-bottom: 10px;
    left: 40px;
    top: 40px;
    position: absolute;
    border:1px solid #CCCCCC;
    box-shadow: inset 0 0 60px red, 0 0 0px blue;
    transition: box-shadow 3s;
}
.keyframe:hover {
    box-shadow: inset 0 0 0px red, 0 0 60px blue;
}

<div class="keyframe"> 
    dual shadow transition (hover me)
</div>

Answer 2

You can get pretty close with keyframes, if you first animate to none before switching between inset and outset shadow. (You can't animate this directly because they are keywords and not numeric values - i.e. there is no "almostInset" shadow).

Consider the following css:

.box {
    box-shadow: inset 0 0 10px #aaa;
    /*add prefixes*/animation: shadowFadeOut 1s;
}
.box:hover {
    box-shadow: 0 0 10px #aaa;
    /*add prefixes*/animation: shadowFadeIn 1s;
}

@/*add prefixes*/keyframes shadowFadeIn {
    0% { box-shadow: inset 0 0 10px #aaa; }
    50% { box-shadow: none; }
    100% { box-shadow: 0 0 10px #aaa; }
}

@/*add prefixes*/keyframes shadowFadeOut {
    0% { box-shadow: 0 0 10px #aaa; }
    50% { box-shadow: none; }
    100% { box-shadow: inset 0 0 10px #aaa; }
}

Demo for webkit at: http://jsfiddle.net/xq4qc/1/

One drawback i can think of is that this will also animate the shadow at first page load.