// Animations

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

// Examples
// @include keyframes(slide-down) {
//   0% { opacity: 1; }
//   90% { opacity: 0; }
// }
//
// .element {
//   width: 100px;
//   height: 100px;
//   background: black;
//   @include animation(slide-down 5s 3);
// }

// Transitions
@mixin transition($args...) {
   -webkit-transition: $args;
   -moz-transition   : $args;
   -ms-transition    : $args;
   -o-transition     : $args;
   transition        : $args;
}

// Examples
// a {
//   color: gray;
//   @include transition(color .3s ease);
//   &:hover {
//     color: black;
//   }
// }

// Transform
@mixin transform($args...) {
   -webkit-transform: $args;
   -moz-transform   : $args;
   -ms-transform    : $args;
   -o-transform     : $args;
   transform        : $args;
}

// Examples
// a {
//   color: gray;
//   @include transform(rotate3d(0,1,0,180deg));
//   &:hover {
//     color: black;
//   }
// }

// backface-visibility
@mixin backface-visibility($args...) {
   -webkit-backface-visibility: $args;
   -moz-backface-visibility   : $args;
   -ms-backface-visibility    : $args;
   -o-backface-visibility     : $args;
   backface-visibility        : $args;
}

// Examples
// a {
//   color: gray;
//   @include backface-visibility(hidden);
//   &:hover {
//     color: black;
//   }
// }

// Perspective
@mixin perspective($args...) {
   -webkit-perspective: $args;
   -moz-perspective   : $args;
   -ms-perspective    : $args;
   -o-perspective     : $args;
   perspective        : $args;
}

// Examples
// a {
//   color: gray;
//   @include perspective(500px);
//   &:hover {
//     color: black;
//   }
// }