revision:
Gradually change the box-shadow property.
<div>
<p>Gradually change the box-shadow property:<p>
<div id="myDIV"><h3>myDIV</h3></div>
</div>
<style>
#myDIV {width: 10vw; height: 10vw; background-color: coral; color: white; animation: mymove 5s infinite;}
@keyframes mymove {
50% {box-shadow: 1vw 2vw 3vw blue; transform: translate (-1vw, 1vw);}
}
</style>
<div>
<div class="container-1">
<h4 class="element--description">Hey look</h4>
<a class="element--hover">Hover me</a>
</div>
</div>
<style>
.container-1 { height: 40vh; display: flex; justify-content: center; align-items: center;
background-color: #377FBF; padding: 0; margin: 0;}
.element--description, .element--hover { font-family: Helvetica, Arial, sans-serif;
font-size: 1.25vw; text-transform: uppercase; color: #fff; background-color: #377FBF;
padding: 2vw 4vw; border-radius: 8vw; }
.element--description { margin-right: 4vw;
box-shadow: 0 4px 4px rgba(0, 0, 0, .1), 0 1px 6px rgba(0, 0, 0, .05),
0 8px 8px rgba(0, 0, 0, .1), 0 16px 16px rgba(0, 0, 0, .1), 8px 32px 32px rgba(0, 0, 0, .15),
8px 64px 64px rgba(0, 0, 0, .15);}
.element--hover {cursor: pointer; transition: box-shadow 600ms cubic-bezier(.33,.11,.02,.99),
transform 600ms cubic-bezier(.33,.11,.02,.99);}
.element--hover:hover { box-shadow: 0 4px 4px rgba(0, 0, 0, .1), 0 1px 6px rgba(0, 0, 0, .05),
0 8px 8px rgba(0, 0, 0, .1), 0 16px 16px rgba(0, 0, 0, .1), 8px 32px 32px rgba(0, 0, 0, .15),
8px 64px 64px rgba(0, 0, 0, .15); transform: scale(1.05) translateY(-0.5rem); }
.element--hover:active { box-shadow: 0 4px 4px rgba(0, 0, 0, .1), 0 1px 6px rgba(0, 0, 0, .05),
0 8px 8px rgba(0, 0, 0, .1), 0 16px 16px rgba(0, 0, 0, .1), 8px 16px 16px rgba(0, 0, 0, .15),
8px 32px 32px rgba(0, 0, 0, .15); }
</style>
<div class="three">
<div class="box"></div>
<div class="box2"></div>
</div>
<style>
.three {height: 50vh; width: 100%; background: #e0ffff; display: flex; justify-content: center;
align-items: center;}
.box, .box2 {height: 15vw; width: 15vw; background: #fff; border-radius: 2vw; margin: 2vw;
transition: all ease 0.2s;}
.box {box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);}
.box:hover {transform: translateY(-.5vw); box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25);}
.box2 {box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, 0.5);}
.box2:hover {transform: translateY(.5vw);box-shadow: inset 0px 10px 20px 2px rgba(0, 0, 0, 0.25);}
</style>
<div class="four">
<div id="sphere"></div>
<svg width="0" height="0">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0 4" />
</filter>
</defs>
</svg>
</div>
<style>
.four { display: flex;justify-content: center; align-items: center; overflow: hidden; background: #ff9090;
background-image: radial-gradient(at center 20%, #f19e9e, #ff9090); width: 40vw;}
#sphere {/* This element is actually the hole */ --size: 5vw; width: var(--size); height: var(--size); border-radius: 50%;
background: black; /* Give the whole dimension */ box-shadow: 0 0.2vw 0.1vw rgba(255, 255, 255, 0.3), 0 -0.2vw 0.4vw rgba(0, 0, 0, 0.6);}
#sphere::after {/* This is the ball */content: ''; display: block; width: 100%; height: 100%; border-radius: 50%;
background: #a02a2a; background-image: radial-gradient(at center 20%, #fdcfcf, #a02a2a); box-shadow: inset 0 -2vw 1vw rgba(0, 0, 0, 0.4), /* shadow on the ball itself */ inset 0 0.3vw 0.5vw rgba(0, 0, 0, 0.4) /* shadow cast by the top edge of the hole while the ball is still in the wall */, 0 0 0 rgba(0, 0, 0, 0.6); /* shadow below the ball, initially not visible */ opacity: 0.8; transform: scale(0.8); animation: 0.6s ease-in infinite pop-out;}
#sphere:hover::after {animation-play-state: paused;}
@keyframes pop-out {
20% {opacity: 1; box-shadow: inset 0 -2vw 1vw rgba(0, 0, 0, 0.4), inset 0 0 0 transparent, 0 1vw 0.1vw rgba(0, 0, 0, 0.3); }
25% {transform: translateY(-0.5vw) scale(1); box-shadow: inset 0 -2vw 1vw rgba(0, 0, 0, 0.4), inset 0 0 0 transparent,
0 2vw 0.4vw rgba(0, 0, 0, 0.3); }
60% { filter: url('#blur'); box-shadow: inset 0 -2vw 1vw rgba(0, 0, 0, 0.4), inset 0 0 0 transparent, 0 5vw 2vw rgba(0, 0, 0, 0.3); }
to {filter: url('#blur'); opacity: 1; transform: translateY(60vh) scale(1.2); box-shadow: inset 0 -2vw 1vw rgba(0, 0, 0, 0.4), inset 0 0 0 transparent, 0 5vw 2vw rgba(0, 0, 0, 0.3); }
}
</style>