Search code examples
csssassbourbon

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?

Solution

  • 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); }
}