_css3.scss

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

@mixin animation($animation...) {
    @each $prefix in $vendors-no-ms {
    #{$prefix}animation: $animation;
   }
}


@mixin bg-size($size) {
	-webkit-background-size: $size; // Safari 3-4
	background-size: $size; // Chrome, Firefox 4+, IE 9+, Opera, Safari 5+
}

@mixin border-radius-noclip($radius) {
	-webkit-border-radius: $radius;
	border-radius: $radius;
}

@mixin border-radius($radius) {
	@include border-radius-noclip($radius);
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

@mixin box-shadow($shadow: 0px 5px 5px 2px rgba(0, 0, 0, 0.3)) {
	-webkit-box-shadow: $shadow;
	box-shadow: $shadow;
}

@mixin box-sizing($box: border-box) {
	-webkit-box-sizing: $box;
	-moz-box-sizing: $box;
	box-sizing: $box;
}

@mixin color-alpha($theme, $alpha: 0.5, $property: 'background-color') {
	#{$property}: $theme; //fallback
	#{$property}: rgba($theme, $alpha);
}


// Gradient mixin for vertical, horizonal and diagonal
// Usage:
//		@include gradient(h, #f00, #0f0);
@mixin gradient($type, $start, $end, $degrees: false) {

	$gradient: linear;
	$direction: top;
	$to-direction: bottom;
	$ie-type: 1;

	@if $type == h {
		$direction: left;
		$to-direction: right;
		$ie-type: 1;
	} @else if $type == d {
		$direction: #{$degrees}deg;
	}

	background: $end; // Old browsers
	@each $vendor in $vendors-no-ms {
		background: #{$vendor}#{$gradient}-gradient($direction, $start 0%, $end 100%);
	}
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$start}', endColorstr='#{$end}',GradientType=#{$ie-type});
}

@mixin gradient-radial($size, $shape, $position, $fallback, $colors...){
	$type: 'radial';
	
	background: $fallback;
	@each $vendor in $vendors-no-w3c {
		background: #{$vendor}#{$type}-gradient($position, $size $shape, $colors);
	}
	background: #{$type}-gradient($size $shape at $position, $colors);
}

@mixin opacity($opacity: 50) {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" $opacity ")";
	filter: alpha(opacity=$opacity);
	opacity: $opacity / 100;
	zoom: 1;
}

@mixin transition($time: 0.2s, $attr: all, $effect: ease, $webkit-transform: false) {
	@each $vendor in $vendors-no-ms {
		#{$vendor}transition: $time $attr $effect;
	}
	@if $webkit-transform {
		-webkit-backface-visibility: hidden;
	}

}

@mixin transition-property($attr, $value) {
	@each $vendor in $vendors-no-ms {
		#{$vendor}transition-#{$attr}: $value; 
	}
}

@mixin transition-transform($attr...) {
	$trans: (transform);
	-webkit-transition-property: append(-webkit-#{$trans}, $attr, comma);
	-o-transition-property: append(-webkit-#{$trans}, $attr, comma);
	transition-property: append(-webkit-#{$trans}, $attr, comma);
	transition-property: $trans, $attr;
}

@mixin transform($trans) {
	@each $vendor in $vendors{
		#{$vendor}transform: $trans;
	}
}

@mixin transform-property($attr, $value) {
	@each $vendor in $vendors {
		#{$vendor}transform-#{$attr}: $value;
	}
}