Elastic Easing in CSS3, Best Approach

div {

    background:  tomato;

    width: 100px;

    height: 100px;

    margin-bottom: 10px;

    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    transform-origin: top left;

}

div:hover {

    -webkit-transform: scale3d(5, 5, 5);

    transform: scale3d(5);

}

<div></div>

<div></div>

<div></div>

Is it possible to specify a custom timing functions for CSS transitions?

I found there is no way to do an elastic transition with pure CSS. However you can cheat and do a CSS animation. This is what apple uses on their site:

@-webkit-keyframes open-1 {
    from { opacity:0; -webkit-transform:translate3d( 210px, -145px, 0); }
    25%  { opacity:1; -webkit-transform:translate3d( -15.6px, 4.1px, 0); }
    30%  { opacity:1; -webkit-transform:translate3d( -10.3px, 2.7px, 0); }
    35%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    40%  { opacity:1; -webkit-transform:translate3d( 4.5px, -1.2px, 0); }
    45%  { opacity:1; -webkit-transform:translate3d( 2.9px, -0.8px, 0); }
    50%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    55%  { opacity:1; -webkit-transform:translate3d( -1.3px, 0.3px, 0); }
    60%  { opacity:1; -webkit-transform:translate3d( -0.8px, 0.2px, 0); }
    65%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    70%  { opacity:1; -webkit-transform:translate3d( 0.4px, -0.1px, 0); }
    75%  { opacity:1; -webkit-transform:translate3d( 0.2px, -0.1px, 0); }
    80%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    85%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
    90%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
    to   { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
}

These animations are used to great extent on Apple's own website:
http://www.apple.com/mac/

Obviously this is powerful to some extent -- since the animations are percentages you can easily change he duration and retain the effect.

However, this is still very static. Let's say you want to click a button and have it perform an elastic scaling animation. No problem, one animation can be used over and over again for each button. But let's say you want to have an element elastically snap it's position to wherever the user most recently clicked or tapped on the screen. Well in this case you'd need to dynamically recalculate the keyframes and then apply the animation to the element.

At the time of this writing I don't know that there are any good examples of dynamically generating CSS animations on the fly inside of javascript. In fact it probably warrants another question. All in all this is the only pure CSS way I found to do render a complex easing equation such as elastic easing purely with CSS.

Simulate bounceInDown easing effect from animate.css

If you want it to smoothly bounce, I suggest to use multiple keyframes (since your current animation is limited by just end keyfrome and one bezier function), but unfortunately jQuery's animate() does not support multiple keyframes. So I would recommended to use CSS for this. Or check out some additional libraries for that like jQuery.Keyframes.

Just imagine keyframes as steps or states between the start keyframe and end keyframe:

If you like the animation of animate.css just have a look what they do in their animation (I removed prefixes to shorten this coding).

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}

Just get inspired by it and maybe change it to your favor.

css3 animations using natural property value

So it seems you can't reference the original colour in keyframes. However, you can just specify one keyframe in a keyframes declaration and let the browser interpolate the colors for you. Using a keyframe of just 50% will use the original properties at 0% (aka from) and 100% (aka to).

With this knowledge we can also effectively queue animations using animation-delay to create what looks like a single animation, but isn't.

For example:

@keyframes fadeblue {

  50% {

    background-color: blue;

  }

}

@keyframes fadewhite {

  50% {

    background-color: white;

  }

}   

.thing1 {

  background-color: red;

  animation: fadeblue 2s,

             fadewhite 2s 2s; 

             /* shorthand here is: animation-name animation-duration animation-delay */

}

.thing2 {

  background-color: green;

  animation: fadeblue 2s,

             fadewhite 2s 2s;

}

.thing3 {

  background-color: yellow;

  animation: fadeblue 2s,

             fadewhite 2s 2s;

}

.thing4 {

  background-color: purple;

  animation: fadeblue 2s,

             fadewhite 2s 2s;

}

<div class="thing1">Thing 1</div>

<div class="thing2">Thing 2</div>

<div class="thing3">Thing 2</div>

<div class="thing4">Thing 2</div>

<div class='left'></div>
<div class='center'></div>
<div class='right'></div>

$('div.left').animate({top: 410, left: 10}, 300, "easeOutCubic", function(){
    $('div.left').animate({top: 400, left: 20}, 300, "easeOutCubic");
});

$('div.center').animate({top: 420}, 300, "easeOutCubic", function(){
    $('div.center').animate({top: 400}, 300, "easeOutCubic");
});

$('div.right').animate({top: 410, right: 10}, 300, "easeOutCubic", function(){
    $('div.right').animate({top: 400, right: 20}, 300, "easeOutCubic");
});