Transition CSS3 Facilité d'entrée et de sortie Box Shadow

Question

J'essaie d'obtenir div id pour faciliter l'entrée et la sortie d'une ombre de boîte à l'aide de CSS3.

Le CSS que j'ai actuellement est:

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

Le problème que j'ai, c'est que lors du premier survol de l'élément, il n'y a pas de relâchement ni de relâchement, puis les survols suivants se relâchent mais ne se relâchent pas.

Tout conseil que les gens auraient serait très apprécié?

Answer 1

Vous devez utiliser des transitions sur .class et pas .class:hover

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

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

<div></div>