Я добавляю класс в div, который добавляет тень к этому div. Это происходит динамически через JQuery. Теперь, когда класс добавлен, эффект тени также добавляется автоматически, без какого-либо эффекта. Есть ли способ добавить некоторый эффект перехода через CSS в этом случае?

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