shine animation with gradient background? - css

Question

I'm trying to create a shine animation on an element that already has a gradient.
But my animation remove the gradient background...
This is what I have done:
body {
background: blue;
}
.mytoast {
-webkit-animation-name: ShineAnimation;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(.12, .89, .98, .47);
box-sizing: border-box;
/*background-color:rgba(0, 0, 0, 0.8);*/
background-image: linear-gradient(-225deg, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
border-radius: 100px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
clear: both;
color: #fff;
cursor: grab;
/* display: -webkit-flex;
display: -ms-flexbox;*/
/* display: flex;*/
display: inline-block;
font-size: 16px;
font-weight: 300;
height: auto;
line-height: 1.5;
margin-top: 8px;
max-width: 100%;
min-height: 48px;
padding: 16px 24px;
position: relative;
top: 0px;
width: 90%;
margin: 0;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
#-webkit-keyframes ShineAnimation {
from {
background-repeat: no-repeat;
background-image: -webkit-linear-gradient( top left, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.0) 45%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0.0) 57%, rgba(255, 255, 255, 0.0) 100%);
background-position: -250px -250px;
background-size: 600px 600px
}
to {
background-repeat: no-repeat;
background-position: 250px 250px;
}
}
<div class="mytoast">
</div>
If you run the code above, you will see the shine animation but the issue is that it will also animate the gradient and removes it which is not what I am trying to do.
could someone please advice on this?

Answer 1

You can set multiple backgrounds (including gradients) in CSS. Since you only animate the background position of the shiny gradient, you can move all definitions to .mytoast, and set the definitions for each of the backgrounds.
In the animations set the background position for both backgrounds. The one for the non animated background would be the identical to the definition in .mytoast.
Note: unless you're going to support really old browsers, you don't need the -webkit prefix.
body {
background: blue;
}
.mytoast {
background:
linear-gradient(
to top left,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.5) 48%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.5) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
),
linear-gradient(-225deg, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
background-size: 600px 600px, 100% 100%;
background-position: -250px -250px, center;
background-repeat: no-repeat;
animation: ShineAnimation 5s infinite cubic-bezier(.12, .89, .98, .47);
box-sizing: border-box;
border-radius: 100px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
clear: both;
color: #fff;
cursor: grab;
display: inline-block;
font-size: 16px;
font-weight: 300;
height: auto;
line-height: 1.5;
margin-top: 8px;
max-width: 100%;
min-height: 48px;
padding: 16px 24px;
position: relative;
top: 0px;
width: 90%;
margin: 0;
}
#keyframes ShineAnimation {
to {
background-position: 250px 250px, center;
}
}
<div class="mytoast">
</div>

Answer 2

I prefer creating a block overlaying before .mytoast and animate the shining block from left to right.
Hope this helps.
body {
width: 100%;
background: blue;
}
.mytoast {
box-sizing: border-box;
background-image: linear-gradient(-225deg, #ff3cac 0%, #562b7c 52%, #2b86c5 100%);
border-radius: 100px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
clear: both;
color: #fff;
cursor: -webkit-grab;
cursor: grab;
display: block;
font-size: 16px;
font-weight: 300;
height: auto;
line-height: 1.5;
width: 100%;
height: 48px;
padding: 16px 24px;
position: relative;
top: 0px;
width: 90%;
margin: 8px 0 0;
overflow: hidden;
}
.mytoast:before {
width: 100%;
height: 48px;
content: "";
background-image: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, 0) 100%);
-webkit-animation-name: ShineAnimation;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(0.12, 0.89, 0.98, 0.47);
display: block;
position: absolute;
top: 0;
left: -100%;
z-index: 2;
-webkit-transform: skew(-20deg);
transform: skew(-20deg);
}
#-webkit-keyframes ShineAnimation {
from {
left: -100%;
}
to {
left: 100%;
}
}
<div class="mytoast"></div>