mixin.scss

// // Remove this mixin if using with Compass imports
// @mixin experimental($property, $value, $moz: false, $webkit: false, $o: false, $ms: false, $khtml: false, $official: true) {
    
//     @if $moz {
//         -moz-#{$property}: $value;
//     }
    
//     @if $webkit {
//         -webkit-#{$property}: $value;
//     }

//     @if $o {
//         -o-#{$property}: $value;
//     }

//     @if $ms {
//         -ms-#{$property}: $value;
//     }

//     @if $khtml {
//         -khtml-#{$property}: $value;
//     }

//     @if $official {
//         #{$property}: $value;
//     }
// }

// @mixin animation (
// 	$animation-name: none, // keyframename|none
// 	$animation-duration: 0s, // time(default=0) 
// 	$animation-timing-function: ease, // linear|ease(default)|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)default
// 	$animation-delay: 0s, // time(default=0)
// 	$animation-iteration-count: 1, // n|infinite 
// 	$animation-direction: normal, // normal|alternate
// 	$animation-fill-mode: none // none(default)|forwards|backwards|both
// ) {
//     @if $animation-name == none {
//         @include experimental(animation, none, -moz, -webkit, -o, not -ms, not -khtml, official);
//     }
//     @else {
//         $full: $animation-name $animation-duration $animation-timing-function $animation-delay $animation-iteration-count $animation-direction $animation-fill-mode; 
//         @include experimental(animation, $full, -moz, -webkit, -o, not -ms, not -khtml, official);
//     }
// }

// @mixin keyframes($name) {
//     @-webkit-keyframes #{$name} {
//         @content;
//     }
//     @-moz-keyframes #{$name} {
//         @content;
//     }
//     @-o-keyframes #{$name} {
//         @content;
//     }
//     @keyframes #{$name} {
//         @content;
//     }
// }


@mixin animation ( $anim-name: none, // keyframename|none
$anim-duration: 0s, // time(default=0)
$anim-timing-function: ease, // linear|ease(default)|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)default
$anim-delay: 0, // time(default=0)
$anim-iteration-count: 1, // n|infinite
$anim-direction: normal, // normal|alternate
$anim-fill-mode: none // none(default)|forwards|backwards|both
) {
    @if $anim-name == none {
        animation: none;
    }
    @else {
        $full: $anim-name $anim-duration $anim-timing-function;

        @if $anim-delay > 0 {
            $full: $full $anim-delay;
        }

        $full: $full $anim-iteration-count $anim-direction $anim-fill-mode;
        animation: $full;
    }
}

@mixin keyframes($name) {
    @keyframes #{$name} {
        @content;
    }
}