How to control shadow of element with 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

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 2

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>

Answer 3

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 4

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>