CSS3 Transition Ease in and out Box Shadow

Tom Pinchen picture Tom Pinchen · Apr 23, 2013 · Viewed 73.9k times · Source

I am trying to get div id to ease in and out of a box shadow using CSS3.

The current CSS I have is:

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

The issue I am having is that on the first hover of the element there is no easing in or out and then any subsequent hovers ease in but do not ease out.

Any advice people have would be much appreciated?

Answer

Mr. Alien picture Mr. Alien · Apr 23, 2013

You need to use transitions on .class and not .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>