Backgrnd Animate

A Linear Shadow Background Animated

















HTML

<div class="bckgrnd_anim">

CSS

/*start********back ground shadow animation **********start*****/
.bckgrnd_anim {background: grey; height: 100%;
animation: bckgrnd 5s linear 2s infinite;
}
@keyframes bckgrnd {
 
0% {background-image: linear-gradient(to right,rgba(245,245,245,1) 5%,rgba(209,209,209,1));}
5% {background-image: linear-gradient(to right,rgba(245,245,245,1) 10%,rgba(209,209,209,1));}
10% {background-image: linear-gradient(to right,rgba(245,245,245,1) 15%,rgba(209,209,209,1));}
15% {background-image: linear-gradient(to right,rgba(245,245,245,1) 20%,rgba(209,209,209,1));}
20% {background-image: linear-gradient(to right,rgba(245,245,245,1) 25%,rgba(209,209,209,1));}
25% {background-image: linear-gradient(to right,rgba(245,245,245,1) 30%,rgba(209,209,209,1));}
30% {background-image: linear-gradient(to right,rgba(245,245,245,1) 35%,rgba(209,209,209,1));}
35% {background-image: linear-gradient(to right,rgba(245,245,245,1) 40%,rgba(209,209,209,1));}
40% {background-image: linear-gradient(to right,rgba(245,245,245,1) 45%,rgba(209,209,209,1));}
45% {background-image: linear-gradient(to right,rgba(245,245,245,1) 50%,rgba(209,209,209,1));}
50% {background-image: linear-gradient(to right,rgba(245,245,245,1) 55%,rgba(209,209,209,1));}
55% {background-image: linear-gradient(to right,rgba(245,245,245,1) 60%,rgba(209,209,209,1));}
60% {background-image: linear-gradient(to right,rgba(245,245,245,1) 65%,rgba(209,209,209,1));}
65% {background-image: linear-gradient(to right,rgba(245,245,245,1) 70%,rgba(209,209,209,1));}
70% {background-image: linear-gradient(to right,rgba(245,245,245,1) 75%,rgba(209,209,209,1));}
75% {background-image: linear-gradient(to right,rgba(245,245,245,1) 80%,rgba(209,209,209,1));}
80% {background-image: linear-gradient(to right,rgba(245,245,245,1) 85%,rgba(209,209,209,1));}
85% {background-image: linear-gradient(to right,rgba(245,245,245,1) 90%,rgba(209,209,209,1));}
90% {background-image: linear-gradient(to right,rgba(245,245,245,1) 95%,rgba(209,209,209,1));}
95% {background-image: linear-gradient(to right,rgba(245,245,245,1) 100%,rgba(209,209,209,1));}

100% {background-image: linear-gradient(to right,rgba(245,245,245,1) 100%,rgba(209,209,209,1));}
}
/*end********back ground shadow animation *************end*****/