Can anyone explain why this transition works in Safari and Chrome (Webkit browsers), but not in Firefox (Mozilla)?
a.lorem {
width: 100px;
padding: 20px;
display: block;
color: white;
text-align: center;
background: rgb(191,210,85);
background: -moz-linear-gradient(top, rgb(191,210,85) 0%, rgb(142,185,42) 50%, rgb(114,170,0) 51%, rgb(158,203,45) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(191,210,85)), color-stop(50%,rgb(142,185,42)), color-stop(51%,rgb(114,170,0)), color-stop(100%,rgb(158,203,45)));
background: -webkit-linear-gradient(top, rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
background: -o-linear-gradient(top, rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
background: -ms-linear-gradient(top, rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
background: linear-gradient(to bottom, rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 );
box-shadow: inset 0 -3px 0 #A9A9A9,
0 3px 0 #EFEFED;
-webkit-transition: box-shadow .5s linear;
-moz-transition: box-shadow .5s linear;
-o-transition: box-shadow .5s linear;
-ms-transition: box-shadow .5s linear;
transition: box-shadow .5s linear;
}
a:hover.lorem {
box-shadow: 0 3px 0 rgba(0, 0, 0, .1),
inset 0 -3px 0 rgba(0, 0, 0, .1),
inset 0 0 100px rgba(255, 255,255 , .3);
}