This could be used to animate gradient backgrounds on large buttons/CTAs
//Animated gradient background
//https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
//Usage:
//Example 1: include gradientAnimation(red, blue, .6s);
//Example 2: include gradientAnimation(lighten($orange, 10), $orange, .6s);
@mixin gradientAnimation( $start, $end, $transTime ){
background-size: 100%;
background-image: linear-gradient($start, $end);
position: relative;
z-index: 100;
&:before {
background-image: linear-gradient($end, $start);
content: "";
display: block;
height: 100%;
position: absolute;
top: 0; left: 0;
opacity: 0;
width: 100%;
z-index: -100;
transition: opacity $transTime;
}
&:hover {
&:before {
opacity: 1;
}
}
}