Simple CSS animation @Mixins

simple-css-mixins

// Simple transform mixins for basic transitions & animations 


//a simple size mixin
@mixin size($size){
	height:$size;
	width:$size;
}

//Simple move across the X-Axis
//e.g., 
//@import move-horizontal(100px)
@mixin move-horizontal($x){
	-webkit-transform:translateX($x);
	transform:translateX($x);
}

//Simple move across the Y-Axis
//e.g., 
//@import move-vertical(100px);
@mixin move-vertical($y){
	-webkit-transform:translateX($y);
	transform:translateX($y);
}

//Sets the transformation origin, especially useful for scales, and rotations
//e.g.,
//@import origin(50%,50%); //for center origin
@mixin origin($originX, $originY){
	-webkit-transform-origin:$originX $originY;
	transform-origin:$originX $originY;
}

//Uniform X,Y scale
//e.g.,
// @import scale(1.5) //makes the size 150%, remember scale 1 is the "normal" size
@mixin scale($scale){
	-webkit-transform:scaleX($scale) scaleY($scale);
	transform:scaleX($scale) scaleY($scale);
}

//A simpler way to rotate things, a common mistake is to forget to write "deg"
//this makes it easier
//e.g.,
// @import rotate(45);
@mixin rotate($degrees){
	-webkit-transform:rotate($degrees + deg);
	transform:rotate($degrees + deg);
}


//A slidein-horizontally mixin, can be used for side menu's or anything else 
//e.g.
// @keyframes{@include slide-in-x(-100px,0);}
//See an example on codepen: http://codepen.io/hagata/pen/xbzjOq
@mixin slide-in-x($origin,$destination){
	0%{
		-web-kit-transform:translateX($origin);
		transform:translateX($origin);
		opacity: $origin;
	}
	100%{
		-web-kit-transform:translateX($destination);
		transform:translateX($destination);
		opacity: 1;
	}
}