Special easing functions built using @Keyframes. Requires Bourbon/SCSS

keyframe-easing-for-bourbon.scss

//// easeOutBounce ////

// looks like: http://easings.net/#easeOutBounce

@include keyframes(easeOutBounce) {
    0%   { @include transform(translateY(100px)); @include animation-timing-function(ease-in);  }
    37%  { @include transform(translateY(0px));   @include animation-timing-function(ease-out); }
    55%  { @include transform(translateY(25px));  @include animation-timing-function(ease-in);  }
    73%  { @include transform(translateY(0px));   @include animation-timing-function(ease-out); }
    82%  { @include transform(translateY(7px));   @include animation-timing-function(ease-in);  }
    91%  { @include transform(translateY(0px));   @include animation-timing-function(ease-out); }
    96%  { @include transform(translateY(2px));   @include animation-timing-function(ease-in);  }
    100% { @include transform(translateY(0px));}
}

// example use:

.my-div { @include animation(easeOutBounce) }

Requires Bourbon

Hi Erin,

that’s what I looked for, thanks!
How would you describe easeInBounce?
I am trying to make your calculations work together with query.transit, a great plugIn that I use on my website chaining in the following way:
$imageIn.transition( { x: -100 }, 37, 'in' )
.transition( { x: 0 }, 18, 'out' )
.transition( { x: 25 }, 18, 'in' )…

Garavani