@mixin fade-in-background-animation($from, $to, $time: 250ms) {
  @-webkit-keyframes backgroundFadeIn {
    from { background-color: $from; }
    to { background-color: $to; }
  }
  @keyframes backgroundFadeIn {
    from { background-color: $from; }
    to { background-color: $to; }
  }

  -webkit-animation: backgroundFadeIn $time;

          animation: backgroundFadeIn $time;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}

@mixin fade-in-opacity {
  @-webkit-keyframes mcAnimateFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes mcAnimateFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  -webkit-animation-name: mcAnimateFadeIn;

          animation-name: mcAnimateFadeIn;
  -webkit-animation-duration: 350ms;
          animation-duration: 350ms;
  -webkit-animation-iteration-count: once;
          animation-iteration-count: once;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

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

  -webkit-animation: spin 500ms infinite linear;

          animation: spin 500ms infinite linear;
}