Simple SCSS mixin to produce the CSS output for animating HTML elements.

_animate.css

@mixin animation ($delay, $duration, $mode, $animation) {
  -webkit-animation: $animation $delay $mode $duration both;
  -moz-animation: $animation $delay $mode $duration both;
  -o-animation: $animation $delay $mode $duration both;
  -ms-animation: $animation $delay $mode $duration both;
  animation: $animation $delay $mode $duration both;
}
 
@mixin keyframe ($animation_name) {
  @-webkit-keyframes $animation_name {
    @content;
  }
  
  @-moz-keyframes $animation_name {
    @content;
  }
  
  @-o-keyframes $animation_name {
    @content;
  }
  
  @keyframes $animation_name {
    @content;
  }
}

/**
EXAMPLE USAGE:
(this particular example will slide an element from offscreen on the right, towards the left)

.htmlClass {
  @include animation(0.6s, 0.8s, ease-in-out, slideFromRight)
}
@include keyframe(slideFromRight) {
  0%{ left: 110%; opacity: 0; }
  100%{ left: 00%; opacity: 1; }
}
*/


/**
EXAMPLE OUTPUT:

.htmlClass {
  -webkit-animation: slideFromRight 0.6s ease-in-out 0.8s both;
  -moz-animation: slideFromRight 0.6s ease-in-out 0.8s both;
  -o-animation: slideFromRight 0.6s ease-in-out 0.8s both;
  -ms-animation: slideFromRight 0.6s ease-in-out 0.8s both;
  animation: slideFromRight 0.6s ease-in-out 0.8s both; }
 
@-webkit-keyframes slideFromRight {
  0% {
    left: 110%;
    opacity: 0; }
 
    100% {
    left: 0%;
    opacity: 1; } }
*/