SASS - animation mixin #sass #animation

SASS--animation-mixin.scss

// Animation
// https://css-tricks.com/almanac/properties/a/animation/
// ---
// animation-name:               NAME
// animation-duration:           Xs or Xms
// animation-timing-function:    ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2)
// animation-delay:              Xs or Xms
// animation-direction:        	normal, alternate
// animation-iteration-count:    X, infinite
// animation-fill-mode:          forwards, backwards, both, none
// animation-play-state:       	paused, running, running

// Animation ex: @include animation(loading 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite 0s)
// ---
// animation-name
// animation-duration 
// animation-timing-function
// animation-delay
// animation-direction
// animation-iteration-count
// animation-fill-mode
// animation-play-state

@mixin animation($animation-str) {
  -webkit-animation: #{$animation-str};
  -moz-animation: #{$animation-str};
  -ms-animation: #{$animation-str};
  animation: #{$animation-str};
}

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} { @content; }
  @-moz-keyframes #{$animation-name} { @content; }
  @-ms-keyframes #{$animation-name} { @content; }
  @keyframes #{$animation-name} { @content; }
}


// --------------------------------
// Example scss
// --------------------------------

div {
  width: 28px;
  height: 28px;
  @include animation(fadein 0.75s ease-out 0.25s 1);
}

@include keyframes(fadein) {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}