Animated Box Shadow

This Tutorial will make Animated Shadow of Box. Shadow of Box is Rotating around its border with Help of Animation & keyframes properties.
Here 2 Style were made. First Box Shadow Rotate in alternate pattern and other rotate in linear pattern.

CSS for Animated Box Shadow

.main{
margin:100px;
}
.main div{
margin:50px;
float:left;
}
.anibsa{
width:100px;
height:100px;
border:1px solid #000;
border-radius:50%;
-webkit-animation:rbsb 5s linear 0s infinite alternate;
animation:rbsb 5s linear 0s infinite alternate;
}
.anibsl{
width:100px;
height:100px;
border:1px solid #000;
border-radius:50%;
-webkit-animation:rbsb 5s linear 0s infinite;
animation:rbsb 5s linear 0s infinite;
}
@keyframes rbsb
{
0% {box-shadow:15px 15px 5px 5px rgba(232,46,14,1);}
20% {box-shadow:0px 15px 5px 5px rgba(232,46,14,1);}
40% {box-shadow:-15px 0px 5px 5px rgba(232,46,14,1);}
50% {box-shadow:-15px -15px 5px 5px rgba(232,46,14,1);}
60% {box-shadow:0px -15px 5px 5px rgba(232,46,14,1);}
80% {box-shadow:15px 0px 5px 5px rgba(232,46,14,1);}
100% {box-shadow:15px 15px 5px 5px rgba(232,46,14,1);}
}
@-webkit-keyframes rbsb /* Safari and Chrome */
{
0% {-webkit-box-shadow:15px 15px 5px 5px rgba(232,46,14,1);}
20% {-webkit-box-shadow:0px 15px 5px 5px rgba(232,46,14,1);}
40% {-webkit-box-shadow:-15px 0px 5px 5px rgba(232,46,14,1);}
50% {-webkit-box-shadow:-15px -15px 5px 5px rgba(232,46,14,1);}
60% {-webkit-box-shadow:0px -15px 5px 5px rgba(232,46,14,1);}
80% {-webkit-box-shadow:15px 0px 5px 5px rgba(232,46,14,1);}
100% {-webkit-box-shadow:15px 15px 5px 5px rgba(232,46,14,1);}
}

Read :- Shutter Page Loading effect with Jquery and CSS

HTML Code for Animated Box Shadow

<div class="main">
<!-- Animated Box Shadow Style 1 - Rotating Alternate -->
<div class="anibsa">
</div>
<!-- Animated Box Shadow Style 2 - Rotating Linear -->
<div class="anibsl">
</div>
</div>

Read :- Stylish Author Box with Social Links [HTML and CSS]

Don't Forgot to Share this Post

About Author: Divy Singh Rathore

I am Founder of Codoat and live in Indore, India.
I am doing Engineering in Computer Science and like to do programming & designing.
Proud to be an Indian