Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Simple CSS animation @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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment