title: CSS3 multiple box-shadow transition in Firefox not working
body: <p>This transition works in Safari &amp; Chrome (= Webkit browsers), but not in Firefox (= Mozilla). Why?</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/9B32s/1/" rel="nofollow">Fiddle</a></p>
  
  <p>​</p>