Custom cubic-bezier transition. Much more humanistic than easing etc.
// Custom cubic-bezier transition - much more humanistic than easing etc
//
// Usage:
// This function can be passed a) property and b) timing.
//
// div {
// @include customTransition(opacity, 1000ms);
// }
//
// Which would output:
//
// div {
// -webkit-transition: opacity 1000ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
// -moz-transition: opacity 1000ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
// -ms-transition: opacity 1000ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
// -o-transition: opacity 1000ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
// transition: opacity 1000ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
// }
//
@mixin customTransition($property: all, $timing: 300ms) {
-webkit-transition: $property $timing cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: $property $timing cubic-bezier(0.26, 0.86, 0.44, 0.985);
-ms-transition: $property $timing cubic-bezier(0.26, 0.86, 0.44, 0.985);
-o-transition: $property $timing cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: $property $timing cubic-bezier(0.26, 0.86, 0.44, 0.985);
}