Don't: Animate the "box-shadow" property, but rather, Animate a pseudo-element.

Your desktop likely handles it without any issues, but your phone may not, and even your desktop may suffer when animating a more complex layout.

Keep transitions and animations to only
transform and opacity, and you're certain to achieve the best possible performance, and with that, the best possible user experience.

 There is no Animation of the "box-shadow"
.box {
   position: relative;
   display: inline-block;
   width: 100px;
   height: 100px;
   background-color: #fff;
   border-radius: 5px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
   transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.box::after {
   content: "";
   border-radius: 5px;
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
   opacity: 0;
   -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
   transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.box:hover {
   -webkit-transform: scale(1.25, 1.25);
   transform: scale(1.25, 1.25);
}

.box:hover::after {
      opacity: 1;
}

Text Shadow
& Multiple shadows

The uncharted waters of Text Shadow. I think this really looks good! Imagine a page written with Text Shadow. It really grabs your attention. Like it's saying:
"This is something you should read".

Here's some other text.. go ahead,.. start writing:

Text Shadowing Info...

Why rgba?

Typography, text-shadow all allows the page to look like it needs to be read. rgba is the ideal color setting for a shadow because it adds yet another dimension to work with. Not only can you set the position, blur and color of the shadow, you can also set its opacity using the alpha value..

Reviewing / Learning
.CSS .JS:..

Because of COVID-19(mid-March, 2020), I've had some time on my hands to review what I'm out of practice(CSS, JavaScript) and I want to be useful in the future (for websites like jw.org). But I also know that we are at the end of this system of things and the Internet as we know it will be gone forever but documenting/writing will not be gone. So I'm making use of free information and instruction so as to get myself back up and running and up-to-date with the new way of doing things.
Doesn't this look cool?
Or, how about this?
Of course the above can be very distracting unless it's a Heading/Title.

Column 2

The above HEADING (h2)(color:white;
text-shadow:
-1px 0 black,
0 1px black,
1px 0 black,
0 -1px black;) needs style or CSS which covers all 4 sides of the heading to create attractive appearances, otherwise it could look boring.
Let me demonstrate one color per-side:
yellow, red, blue, green.
Column 2.