Add box shadow with transition effect

Question

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?

HTML:

<div id="box"></div> 

CSS:

#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; } 

Answer 1

Yes, simply add the transition (or the vendor-prefixed versions) to the CSS:

$('#t').click(    function(){      $('#box').toggleClass('shadow');    });

#box {    width: 50px;    height: 200px;    -webkit-transition: all 1s linear;    -o-transition: all 1s linear;    -moz-transition: all 1s linear;    -ms-transition: all 1s linear;    -kthtml-transition: all 1s linear;    transition: all 1s linear;  }    .shadow {    -webkit-box-shadow: 0px 0px 4px 2px #D50E0E;    -moz-box-shadow: 0px 0px 4px 2px #D50E0E;    box-shadow: 0px 0px 4px 2px #D50E0E;    -webkit-transition: all 1s linear;    -o-transition: all 1s linear;    -moz-transition: all 1s linear;    -ms-transition: all 1s linear;    -kthtml-transition: all 1s linear;    transition: all 1s linear;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button id="t">Toggle the 'shadow' class</button>    <div id="box">Some content in the 'box' div.</div>

JS Fiddle demo.

References:

• click().
• toggleClass().