CSS3 Transition Ease in and out Box Shadow

Question

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?

score 70 · Accepted Answer · edited Aug 19 '19 at 19:42

70

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>

edited Aug 19 '19 at 19:42

leonheess

16,068
14
77
112

answered Apr 23 '13 at 07:56

Mr. Alien

153,751
34
298
278

7

needed to be `box-shadow: none` for me in the div. – Karl Glaser Apr 07 '14 at 05:39
2

There is a better (= performance optimized) way to animate box-shadow. See http://tobiasahlin.com/blog/how-to-animate-box-shadow/ – Pointi Feb 08 '18 at 13:47

score 5 · Answer 2 · answered Oct 14 '20 at 18:42

Here is a resource-efficient solution

#how-to-content-wrap-first::after{
    /* Pre-render the bigger shadow, but hide it */
    box-shadow: 3px 3px 5px -1px #80aaaa;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;         
}

#how-to-content-wrap-first:hover::after {
    /* Transition to showing the bigger shadow on hover */
    opacity: 1;
}

score 2 · Answer 3 · edited Feb 17 '21 at 14:32

2

This could work:

 #how-to-content-wrap-first:hover{
      box-shadow : inset 0 1px 1px rgba(0,0,0,.075);
      -webkit-transition : box-shadow ease-in-out .15s;
      transition : box-shadow ease-in-out .15s;
 }

edited Feb 17 '21 at 14:32

Adrian Mole

49,934
160
51
83

answered Feb 17 '21 at 11:58

Varun Krishna

21
3

CSS3 Transition Ease in and out Box Shadow

3 Answers3