Skip to content

Instantly share code, notes, and snippets.

@benbonnet
Created March 6, 2014 14:56
Show Gist options
  • Save benbonnet/9391498 to your computer and use it in GitHub Desktop.
Save benbonnet/9391498 to your computer and use it in GitHub Desktop.
@mixin timingFunctions($name) {
@if $name == 'easeInQuad' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.550, 0.085, 0.680, 0.530)") }
@if $name == 'easeInCubic' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.550, 0.055, 0.675, 0.190)") }
@if $name == 'easeInQuart' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.895, 0.030, 0.685, 0.220)") }
@if $name == 'easeInQuint' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.755, 0.050, 0.855, 0.060)") }
@if $name == 'easeInSine' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.470, 0.000, 0.745, 0.715)") }
@if $name == 'easeInExpo' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.950, 0.050, 0.795, 0.035)") }
@if $name == 'easeInCirc' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.600, 0.040, 0.980, 0.335)") }
@if $name == 'easeInBack' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.600, -0.280, 0.735, 0.045)") }
@if $name == 'easeOutQuad' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.250, 0.460, 0.450, 0.940)") }
@if $name == 'easeOutCubic' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.215, 0.610, 0.355, 1.000)") }
@if $name == 'easeOutQuart' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.165, 0.840, 0.440, 1.000)") }
@if $name == 'easeOutQuint' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.230, 1.000, 0.320, 1.000)") }
@if $name == 'easeOutSine' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.390, 0.575, 0.565, 1.000)") }
@if $name == 'easeOutExpo' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.190, 1.000, 0.220, 1.000)") }
@if $name == 'easeOutCirc' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.075, 0.820, 0.165, 1.000)") }
@if $name == 'easeOutBack' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.175, 0.885, 0.320, 1.275)") }
@if $name == 'easeInOutQuad' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.455, 0.030, 0.515, 0.955)") }
@if $name == 'easeInOutCubic' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.645, 0.045, 0.355, 1.000)") }
@if $name == 'easeInOutQuart' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.770, 0.000, 0.175, 1.000)") }
@if $name == 'easeInOutQuint' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.860, 0.000, 0.070, 1.000)") }
@if $name == 'easeInOutSine' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.445, 0.050, 0.550, 0.950)") }
@if $name == 'easeInOutExpo' { @include vendor-prefix("transition-timing-function","cubic-bezier(1.000, 0.000, 0.000, 1.000)") }
@if $name == 'easeInOutCirc' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.785, 0.135, 0.150, 0.860)") }
@if $name == 'easeInOutBack' { @include vendor-prefix("transition-timing-function","cubic-bezier(0.680, -0.550, 0.265, 1.550)") }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment