title: Add box shadow with transition effect
body: <p>I'm adding a class to a div that adds a box shadow to that div. This happens dynamically via jquery. Now, when the class is added, the shadow effect is added automatically as well, without any effect. Is there a way to add some transition effect via css in this case?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="box"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#box {
      width: 50px;
      height: 200px;
  }
  
  .shadow {
      -webkit-box-shadow: 0px 0px 4px 2px #D50E0E;
      -moz-box-shadow: 0px 0px 4px 2px #D50E0E;
      box-shadow: 0px 0px 4px 2px #D50E0E;
  }
  </code></pre>