How to implement easeOutBack easing in css transform animation

问题

I am working with some css animation. But I found that, the CSS transition only support following easing function.

I do want to use something like easeOutBack easing in the animation with pure css. I am thinking to do it with the webkit-animation. But only safari support it.

The easeOutBack motion is a motion where the object will go beyond the boundary and back again.More about different motion function. You can see this link below.

http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html

Anyone have suggestion of how to implement easeOutBack easing in css transform animation?

回答1:

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 -

EaseOutBack http://i56.tinypic.com/adg8yo.png

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/

回答2:

Looks like the following code will add the easeOutBack animation to jQuery, and then you should be able to use it.

jQuery.extend(jQuery.easing, {
    easeOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    }
});

Found from http://jsfiddle.net/marcofucci/rRtAq/ which mentions http://gsgd.co.uk/sandbox/jquery/easing/.

回答3:

Another alternative is the CSS3 Animation Generator, which enables 12 easing functions not supported by the W3C specifics, including back-ease-out. Rather than using cubic curves, which has a number of limitations, the CSS3 Animation Generator uses calculated keyframes.

来源：https://stackoverflow.com/questions/5699091/how-to-implement-easeoutback-easing-in-css-transform-animation

标签

css

css3

easing