How to make Simple CSS linear-gradient animation :-

 Output Live demo :-

CSS 45° linear-gradient Animation

CSS -45° linear-gradient Animation

CSS 90° linear-gradient Animation

CSS -90° linear-gradient Animation

CSS 180° linear-gradient Animation

CSS -180° linear-gradient Animation

CSS 135° linear-gradient Animation

CSS -135° linear-gradient Animation

Source Code Example :-

 <html>
<head>
<style>

 #d1{
border:4px solid grey;
border-radius:50%;
height:200px;
width:200px;
background: linear-gradient(45deg, green, blue, brown, yellow);
background-size :300%;
animation:d1 .5s linear infinite ;

 }
@keyframes d1{
0%{background: linear-gradient(45deg, green, blue, brown, yellow);}
25%{background: linear-gradient(45deg, yellow, green, blue, brown);}
50%{background: linear-gradient(45deg, brown, yellow, green, blue);}
75%{background: linear-gradient(45deg, blue, brown, yellow, green);}
100%{background: linear-gradient(45deg, green, blue, brown, yellow);}
}
#d2{
border:4px solid grey;
border-radius:50%;
height:200px;
width:200px;
background: linear-gradient(-45deg, green, blue, brown, yellow);
background-size :300%;
animation:d2 .5s linear infinite ;

 }
@keyframes d2{
0%{background: linear-gradient(-45deg, green, blue, brown, yellow);}
25%{background: linear-gradient(-45deg, yellow, green, blue, brown);}
50%{background: linear-gradient(-45deg, brown, yellow, green, blue);}
75%{background: linear-gradient(-45deg, blue, brown, yellow, green);}
100%{background: linear-gradient(-45deg, green, blue, brown, yellow);}
}
#d3{
border:4px solid grey;
border-radius:50%;
height:200px;
width:200px;
background: linear-gradient(90deg, green, blue, brown, yellow);
background-size :300%;
animation:d3 .5s linear infinite ;

 }
@keyframes d3{
0%{background: linear-gradient(90deg, green, blue, brown, yellow);}
25%{background: linear-gradient(90deg, yellow, green, blue, brown);}
50%{background: linear-gradient(90deg, brown, yellow, green, blue);}
75%{background: linear-gradient(90deg, blue, brown, yellow, green);}
100%{background: linear-gradient(90deg, green, blue, brown, yellow);}
}
#d4{
border:4px solid grey;
border-radius:50%;
height:200px;
width:200px;
background: linear-gradient(-90deg, green, blue, brown, yellow);
background-size :300%;
animation:d4 .5s linear infinite ;

 }
@keyframes d4{
0%{background: linear-gradient(-90deg, green, blue, brown, yellow);}
25%{background: linear-gradient(-90deg, yellow, green, blue, brown);}
50%{background: linear-gradient(-90deg, brown, yellow, green, blue);}
75%{background: linear-gradient(-90deg, blue, brown, yellow, green);}
100%{background: linear-gradient(-90deg, green, blue, brown, yellow);}
}
#d4{
border:4px solid grey;
border-radius:50%;
height:200px;
width:200px;
background: linear-gradient(-90deg, green, blue, brown, yellow);
background-size :300%;
animation:d4 .5s linear infinite ;

 }
@keyframes d4{
0%{background: linear-gradient(-90deg, green, blue, brown, yellow);}
25%{background: linear-gradient(-90deg, yellow, green, blue, brown);}
50%{background: linear-gradient(-90deg, brown, yellow, green, blue);}
75%{background: linear-gradient(-90deg, blue, brown, yellow, green);}
100%{background: linear-gradient(-90deg, green, blue, brown, yellow);}
}
#d4{
border:4px solid grey;
border-radius:50%;
height:200px;
width:200px;
background: linear-gradient(-90deg, green, blue, brown, yellow);
background-size :300%;
animation:d4 .5s linear infinite ;

 }
@keyframes d4{
0%{background: linear-gradient(-90deg, green, blue, brown, yellow);}
25%{background: linear-gradient(-90deg, yellow, green, blue, brown);}
50%{background: linear-gradient(-90deg, brown, yellow, green, blue);}
75%{background: linear-gradient(-90deg, blue, brown, yellow, green);}
100%{background: linear-gradient(-90deg, green, blue, brown, yellow);}
}
#d5{
border:4px solid grey;
border-radius:50%;
height:200px;
width:200px;
background: linear-gradient(180deg, green, blue, brown, yellow);
background-size :300%;
animation:d5 .5s linear infinite ;

 }
@keyframes d5{
0%{background: linear-gradient(180deg, green, blue, brown, yellow);}
25%{background: linear-gradient(180deg, yellow, green, blue, brown);}
50%{background: linear-gradient(180deg, brown, yellow, green, blue);}
75%{background: linear-gradient(180deg, blue, brown, yellow, green);}
100%{background: linear-gradient(180deg, green, blue, brown, yellow);}
}
#d6{
border:4px solid grey;
border-radius:50%;
height:200px;
width:200px;
background: linear-gradient(-180deg, green, blue, brown, yellow);
background-size :300%;
animation:d6 .5s linear infinite ;

 }
@keyframes d6{
0%{background: linear-gradient(-180deg, green, blue, brown, yellow);}
25%{background: linear-gradient(-180deg, yellow, green, blue, brown);}
50%{background: linear-gradient(-180deg, brown, yellow, green, blue);}
75%{background: linear-gradient(-180deg, blue, brown, yellow, green);}
100%{background: linear-gradient(-180deg, green, blue, brown, yellow);}
}
#d7{
border:4px solid grey;
border-radius:50%;
height:200px;
width:200px;
background: linear-gradient(135deg, green, blue, brown, yellow);
background-size :300%;
animation:d7 .5s linear infinite ;

 }
@keyframes d7{
0%{background: linear-gradient(135deg, green, blue, brown, yellow);}
25%{background: linear-gradient(135deg, yellow, green, blue, brown);}
50%{background: linear-gradient(135deg, brown, yellow, green, blue);}
75%{background: linear-gradient(135deg, blue, brown, yellow, green);}
100%{background: linear-gradient(135deg, green, blue, brown, yellow);}
}
#d8{
border:4px solid grey;
border-radius:50%;
height:200px;
width:200px;
background: linear-gradient(-135deg, green, blue, brown, yellow);
background-size :300%;
animation:d8 .5s linear infinite ;

 }
@keyframes d8{
0%{background: linear-gradient(-135deg, green, blue, brown, yellow);}
25%{background: linear-gradient(-135deg, yellow, green, blue, brown);}
50%{background: linear-gradient(-135deg, brown, yellow, green, blue);}
75%{background: linear-gradient(-135deg, blue, brown, yellow, green);}
100%{background: linear-gradient(-135deg, green, blue, brown, yellow);}
}
</style>
</head>

 <body><br>

 <center><b> CSS 45° linear-gradient Animation </b><div id ="d1"><b> </b></div><br>
<center><b> CSS -45° linear-gradient Animation </b><div id ="d2"><b> </b></div><br>
<center><b> CSS 90° linear-gradient Animation </b><div id ="d3"><b> </b></div><br>
<center><b> CSS -90° linear-gradient Animation </b><div id ="d4"><b> </b></div><br>
<center><b> CSS 180° linear-gradient Animation </b><div id ="d5"><b> </b></div><br> 
<center><b> CSS -180° linear-gradient Animation </b><div id ="d6"><b> </b></div><br>
<center><b> CSS 135° linear-gradient Animation </b><div id ="d7"><b> </b></div><br>
<center><b> CSS -135° linear-gradient Animation </b><div id ="d8"><b> </b></div><br>
   

 </center>
</body>

</html>