Animation with elastic image effect ( CSS3 & JS )

Question

I have found a very interested animate affect on Apple.com

http://store.apple.com/au/buy-mac/mac-pro

The top menu bar, which is very interesting the menu bar animated as the image is elastic as well. I did a quick experiment below, it sort works but don't get the elastic effect, anyone could help here? Would like to use this affect for my project.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    $('ul').click(function() {
      $('ul li').each(function(i) {
        var $li = $(this);
        setTimeout(function() {
          $li.attr('style', 'styel="-webkit-transform: translateX(500px);"');
        }, i*100); // delay 100 ms
      });
    });
})
</script>
<style type="text/css">
li
{

    float: left;

    -webkit-transition-property: -webkit-transform,left,-webkit-box-shadow;
    -moz-transition-property: -webkit-transform,left,-webkit-box-shadow;
    transition-property: -webkit-transform,left,-webkit-box-shadow;
    -moz-transition-property: -moz-transform,left,-moz-box-shadow;
    -ms-transition-property: -ms-transform,left,box-shadow;
    -o-transition-property: -o-transform,left,box-shadow;
    -webkit-transition-duration: .4s,0.4s,100ms;
    -moz-transition-duration: .4s,0.4s,100ms;
    transition-duration: .4s,0.4s,100ms;
    -moz-transition-duration: .4s,0.4s,100ms;
    -ms-transition-duration: .4s,0.4s,100ms;
    -o-transition-duration: .4s,0.4s,100ms;
    -webkit-transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    -moz-transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    -moz-transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    -ms-transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    -o-transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    transition-property: transform,left,box-shadow;
    transition-duration: .5s,0.5s,100ms;
    transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
}
li.what
{
    -webkit-transform: translateX(878px);
}
</style>

<ul>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
</ul>

Answer 1

Not the perfect and final animation, but this can get you going:

CSS

.container {
    width: 550px;
    height: 50px;
    overflow: hidden;
}

.child {
    border-left: 1px solid #660000;
    height: 50px;
    display: inline-block;
    width: 100px;
    font-size: 28px;
    position: relative;
    background-size: 60px 40px;
    background-position: center center;
    background-repeat: no-repeat;
    transition: left;

    transition-duration: 1.5s;
    transition-property: all;
    transition-timing-function: ease-out;
}

 .child:nth-child(1) {
     background-image: linear-gradient(90deg,lightgreen,lightgreen);
     transition-delay: 0.3s;
}

 .child:nth-child(2) {
     background-image: linear-gradient(90deg,lightblue,lightblue);
     transition-delay: 0.5s;
}
 .child:nth-child(3) {
     background-image: linear-gradient(90deg,lemonchiffon,lemonchiffon);
     transition-delay: 0.7s;
}
 .child:nth-child(4) {
     background-image: linear-gradient(90deg,lavender,lavender);
     transition-delay: 0.9s;
}
 .child:nth-child(5) {
     background-image: linear-gradient(90deg,linen,linen);
     transition-delay: 1.1s;
}

.container:hover .child {
   left: 550px;    
   padding-left: 70px;
    transition-timing-function: ease-in;
}

.container:hover .child:nth-child(1) {
     transition-delay: 1.1s;
}
 .container:hover .child:nth-child(2) {
     transition-delay: 0.9s;
}
.container:hover .child:nth-child(3) {
     transition-delay: 0.7s;
}
.container:hover .child:nth-child(4) {
     transition-delay: 0.5s;
}
.container:hover .child:nth-child(5) {
     transition-delay: 0.3s;
}

fiddle

In the fiddle hover over the elements to see the animation.

Notice that there must be different properties for the "out" and "in" animations.