title: How to apply a web-transition from inset to outer box-shadow on a div box?
body: <p>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.</p>
  
  <p><a href="http://jsfiddle.net/xq4qc/">http://jsfiddle.net/xq4qc/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="greyrow"&gt; 
      good transition
      &lt;/div&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;div class="whiterow"&gt; 
      no transition
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  
  
  }
  </code></pre>