How to control shadow of element with CSS? - css

Question

I am playing around with animating shadow. I want it to work like this: When i click on box, i want class of "shadow" to be added. When it does, i want to animate shadow like it is lifting up, and when removed class, i want shadow to disappear the same way it appears (reverse). I have created keyframes and set the blur and opacity to change.
One thing i notice is, the animation is not smooth, it goes by steps. Why is it so? I want shadow animation to be smooth.
Second, how to create that shadow will also disappear in reverse when class is removed?
Here is my code so far:
const box = document.querySelector(".box");
function shadowHandle(){
box.classList.toggle("shadow");
}
box.addEventListener("click", shadowHandle);
body{
margin: 100px;
}
.box{
width: 100px;
height: 300px;
background-color: red;
}
#-webkit-keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
#-moz-keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
#keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
.shadow {
animation: shadow 2s forwards; /* CSS3 */
-moz-animation: shadow 2s forwards; /* Firefox */
-webkit-animation: shadow 2s forwards; /* Webkit */
}
<div class="box shadow"></div>

Answer 1

I think using a transition is the way to go here. It will animate back "mid-animation".
here's an example with :hover, but you can use an added class as well.
.box{
width: 100px;
height: 100px;
background: silver;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease-in-out;
}
.box:hover {
box-shadow: -4px 0px 40px rgba(0, 0, 0, 1);
}
<div class="box">
</div>

Answer 2

You don't need Keyframes. This is much more easier with transition
const box = document.querySelector(".box");
function shadowHandle(){
box.classList.toggle("shadow");
}
box.addEventListener("click", shadowHandle);
body{
margin: 100px;
}
.box{
width: 100px;
height: 300px;
background-color: red;
box-shadow: none;
transition: all 1s ease;
}
.box.shadow {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
<div class="box"></div>

Answer 3

This can be simply achieved through transition
Follow the snippet below:
Add the box-shadow to class shadow
now add CSS transition to the `.box.
transition: all 1s linear
This will animate all css properties which can be animated
For a duration of 1s
In a linear rate. Other values are ease ease-in ease-out, etc
Play around and find out.
const box = document.querySelector(".box");
function shadowHandle() {
box.classList.toggle("shadow");
}
box.addEventListener("click", shadowHandle);
body {
margin: 100px;
}
.box {
width: 100px;
height: 300px;
background-color: red;
transition: all 1s linear;
}
.shadow {
box-shadow: -4px 0px 40px rgba(0, 0, 0, 1);
}
<div class="box"></div>

Answer 4

Added another animation class no-shadow with reverse styles.
#-webkit-keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
#-moz-keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
#keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
.no-shadow {
animation: no-shadow 2s forwards; /* CSS3 */
-moz-animation: no-shadow 2s forwards; /* Firefox */
-webkit-animation: no-shadow 2s forwards; /* Webkit */
}
const box = document.querySelector(".box");
function shadowHandle(){
box.classList.toggle("shadow");
box.classList.toggle("no-shadow");
}
box.addEventListener("click", shadowHandle);
body{
margin: 100px;
}
.box{
width: 100px;
height: 300px;
background-color: red;
}
#-webkit-keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
#-moz-keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
#keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
.shadow {
animation: shadow 2s forwards; /* CSS3 */
-moz-animation: shadow 2s forwards; /* Firefox */
-webkit-animation: shadow 2s forwards; /* Webkit */
}
#-webkit-keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
#-moz-keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
#keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
.no-shadow {
animation: no-shadow 2s forwards; /* CSS3 */
-moz-animation: no-shadow 2s forwards; /* Firefox */
-webkit-animation: no-shadow 2s forwards; /* Webkit */
}
<div class="box shadow"></div>