CSS3 Transition Ease in and out Box Shadow
88,806
Solution 1
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>
Solution 2
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;
}
Solution 3
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;
}
Author by
Tom Pinchen
Updated on February 18, 2021Comments
-
Tom Pinchen about 3 years
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?
-
Karl Glaser about 10 yearsneeded to be
box-shadow: none
for me in the div. -
Pointi about 6 yearsThere is a better (= performance optimized) way to animate box-shadow. See tobiasahlin.com/blog/how-to-animate-box-shadow