Transizione CSS3 Facilità dentro e fuori Box Shadow

Question

Sto cercando di ottenere div id per facilitare l'entrata e l'uscita dall'ombra di una casella utilizzando CSS3.

L'attuale CSS che ho è:

#how-to-content-wrap-first:hover { 
-moz-box-shadow: 0px 0px 5px #1e1e1e; 
-webkit-box-shadow: 0px 0px 5px #1e1e1e; 
box-shadow: 0px 0px 5px #1e1e1e; 
-webkit-transition: box-shadow 0.3s ease-in-out 0s; 
-moz-transition: box-shadow 0.3s ease-in-out 0s; 
-o-transition: box-shadow 0.3s ease-in-out 0s; 
-ms-transition: box-shadow 0.3s ease-in-out 0s; 
transition: box-shadow 0.3s ease-in-out 0s; 

Il problema che sto avendo è che il primo presso l'elemento non v'è alcun allentamento dentro o fuori e poi ogni libra successive facilità di ma non facilità su.

Qualche consiglio che le persone avrebbero apprezzato?

Answer 1

è necessario utilizzare le transizioni su .class e non .class:hover

Demo

div { 
    height: 200px; 
    width: 200px; 
    box-shadow: none; 
    transition: box-shadow 1s; 
    border: 1px solid #eee; 
} 

div:hover { 
    box-shadow: 0 0 3px #515151; 
}