SCSS
@mixin gradient-green {
background: #93c665;
background: -moz-linear-gradient(left, #93c665 0%, #50ae47 50%, #38722f 100%);
background: -webkit-linear-gradient(left, #93c665 0%,#50ae47 50%,#38722f 100%);
background: linear-gradient(to right, #93c665 0%,#50ae47 50%,#38722f 100%);
}
@mixin bg-anim-LtoR {
-webkit-animation: gradientBackward 1s forwards;
-moz-animation: gradientBackward 1s forwards;
animation: gradientBackward 1s forwards;
}
@mixin bg-anim-RtoL {
-webkit-animation: gradientForward 1s forwards;
-moz-animation: gradientForward 1s forwards;
animation: gradientForward 1s forwards;
}
@-webkit-keyframes gradientForward {
0% { background-position: 0 50%; }
100% { background-position: 100% 50%; }
}
@-moz-keyframes gradientForward {
0% { background-position: 0 50%; }
100% { background-position: 100% 50%; }
}
@keyframes gradientForward {
0% { background-position: 0 50%; }
100% { background-position: 100% 50%; }
}
@-webkit-keyframes gradientBackward {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
@-moz-keyframes gradientBackward {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
@keyframes gradientBackward {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
div.test {
margin: 10% auto 0;
width: 400px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-transform: uppercase;
font-size: 31px;
@include gradient-green;
background-size: 200% 100%;
@include bg-anim-LtoR;
&:hover {
@include bg-anim-RtoL;
}
}
2 Responses
So yeah... I didn't reinvent the wheel, just adapted it to my needs ;)