benjamincharity
2/16/2013 - 5:59 PM

Custom cubic-bezier transition. Much more humanistic than easing etc.

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);
}