Mateusz Urbański Mateusz Urbański - 9 months ago 67
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); }
}