Упростить анимации в CSS

Question

У меня есть следующий файл СКС в моем проекте

&.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); 
     } 
    } 
    } 

мне интересно, если есть способ упростить это с бурбонами?

Answer 1

Похоже, от the documentation что вы можете использовать mixin keyframes для упрощения реализации ключевых кадров.

Как такой

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