Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Mixins for Animating Between Gradients
.gradient-animation( @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;
}
}
}
@mixin gradient-animation( $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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.