You can specify your own curve with the -webkit-animation-timing-function CSS property.

The format of the function is cubic-bezier(P1x, P1y, P2x, P2y) where P1 and P2 are the two middle points of a cubic bezier curve from (0,0) to (1,1). In your case you want something that looks like -

So the points you would specify in this curve are - (0,0) and (0.2,1). This makes the curve - cubic-bezier(0,0,0.2,1).

Alas, the webkit cubic curve specification does not allow the animation to exceed the bounds of 1,1 cube. So to actually animate the curve as desired you need to add an extra keyframe that specifies the 'overflow'.

@-webkit-keyframes snapback {
    0% {
        -webkit-transform:translateX(0px);
    }
    60% {
        -webkit-transform:translateX(140px);
    }
    100% {
        -webkit-transform:translateX(100px);
    }
}

Take a look at the example I threw together - http://jsfiddle.net/Heqs8/