Loop gradient effect on existing button - css

Question

I have a button that is already exist :
<div class="button-loader locationButton brandBlue fontMediumTitle " id="locationButton"></div>
I would like to be able to add a class button-loader , to this button or any other button, and
keep it's current background color
animate from left to right and back, in a loop - so that I start with the original color and change its opacity from left to right and back to original.(say it become 0.5 in opacity from left, and back to 1.0 from right)
.button-loader {
width: 100%;
height: 100%;
display: block;
background: linear-gradient(to right, rgba(245, 245, 245, 0.95), rgba(255, 255, 255, 0.0));
background-size: 200% 100%;
background-position: right bottom;
transition: all 1.5s ease-out;
}
.button-loader:hover {
background-position: left bottom;
}
Current code will not loop forever and will not keep the original color before animation begin(its already gradient)

Answer 1

Consider the gradient on a pseudo element instead where you can easily keep the initial background color:
.button-loader {
width: 100px;
height: 100px;
border:1px solid;
background-size: 200% 100%;
transition: all 1.5s ease-out;
position:relative;
z-index:0;
}
.button-loader:before {
content:"";
position:absolute;
z-index:-1;
top:0;
right:0;
left:0;
bottom:0;
background: linear-gradient(to right,rgba(255, 255, 255, 0.0), rgba(245, 245, 245, 0.95) 40% 60%, rgba(255, 255, 255, 0.0));
background-size:600% 100%;
background-position:right;
transition:1s all;
}
.button-loader:hover:before {
background-position:left;
}
<div class="button-loader" style="background:blue;"></div>
<div class="button-loader" style="background:red;"></div>
<div class="button-loader" style="background:linear-gradient(red,purple);"></div>
For an infinite animation, you can replace transition with animation:
.button-loader {
width: 100px;
height: 100px;
border:1px solid;
background-size: 200% 100%;
transition: all 1.5s ease-out;
position:relative;
z-index:0;
}
.button-loader:before {
content:"";
position:absolute;
z-index:-1;
top:0;
right:0;
left:0;
bottom:0;
background: linear-gradient(to right,rgba(255, 255, 255, 0.0), rgba(245, 245, 245, 0.95) 45% 55%, rgba(255, 255, 255, 0.0));
background-size:600% 100%;
background-position:right;
animation:change 1s infinite linear;
}
#keyframes change {
to {
background-position:left;
}
}
<div class="button-loader" style="background:blue;"></div>
<div class="button-loader" style="background:red;"></div>
<div class="button-loader" style="background:linear-gradient(red,purple);"></div>
You can also animate translate for better performance:
.button-loader {
width: 100px;
height: 100px;
border:1px solid;
background-size: 200% 100%;
transition: all 1.5s ease-out;
position:relative;
z-index:0;
overflow:hidden;
}
.button-loader:before {
content:"";
position:absolute;
z-index:-1;
top:0;
right:0;
width:600%;
bottom:0;
background: linear-gradient(to right,rgba(255, 255, 255, 0.0), rgba(245, 245, 245, 0.95) 45% 55%, rgba(255, 255, 255, 0.0));
animation:change 1s infinite linear;
}
#keyframes change {
to {
transform:translate(84%);
}
}
<div class="button-loader" style="background:blue;"></div>
<div class="button-loader" style="background:red;"></div>
<div class="button-loader" style="background:linear-gradient(red,purple);"></div>