$animate-properties: all;
$animate-duration: 0.15s;
$animate-function: ease;
$animate-delay: 0s;

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

    @-moz-keyframes #{$name} {
        @content;
    }

    @-ms-keyframes #{$name} {
        @content;
    }

    @keyframes #{$name} {
        @content;
    }
}

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

@mixin animate($properties: $animate-properties, $duration: $animate-duration, $function: $animate-function, $delay: $animate-delay) {
    -webkit-transition-property: $properties;
    -moz-transition-property: $properties;
    -o-transition-property: $properties;
    transition-property: $properties;
    -webkit-transition-duration: $duration;
    -moz-transition-duration: $duration;
    -o-transition-duration: $duration;
    transition-duration: $duration;
    -webkit-transition-timing-function: $function;
    -moz-transition-timing-function: $function;
    -o-transition-timing-function: $function;
    transition-timing-function: $function;
}