Mateusz Urbański Mateusz Urbański - 1 month ago 7
Sass (Sass) Question

Simplify animations in css

I have the following scss file in my project

&.care-loading-icon{
.glyphicon-refresh-animate {
@include care-loading-animation
}

@keyframes spin {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1) rotate(360deg);
}
}

@-webkit-keyframes spinw {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}

@-moz-keyframes spinm {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
}


I'm wondering if there is any way to simplify this with bourbon?

Answer

Looks like, from the documentation that you can use the mixin keyframes to simplify your keyframes implementation.

Like such

@include keyframes(spin) {
    from { @include transform(0deg); } 
    to { @include transform(360deg); }
}
Comments