How to implement easeOutBack easing in css transform animation


Tags: css,css3,easing

Problem :

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

ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()

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?



Solution :

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

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/


    CSS Howto..

    How to create a standing up 3D text effect with Css3 transforms

    Slickgrid - How to add css at grid creation time?

    How to make a round mask over a image

    How to do multiple class selectors in Stylus CSS pre-processor

    How to dynamically change CSS style attribute of DIV tag?

    How to include a CSS link if a call isn't done via AJAX?

    how to improve this CSS layout which look like a table [closed]

    How to achieve this CSS layout - Answered [closed]

    how to center text vertically in html using css only

    How to properly fix CSS inconsistencies across desktop and mobile browsers?

    How to remove space between list items in navigation (HTML / CSS)

    How to move div to top and remove?

    How to control cursor/caret size with CSS

    How to stop jquery from overriding CSS color?

    How to position label text with css

    How style DIV when the id inclue strings in php?

    How to ask browsers to refresh (flush) the cache of my website?

    Text overlay over image on hover. How to stop other divs from moving

    Bootstrap How-to: checkbox should change text input value when selected/checked [closed]

    How do you wrap long words on newline, and avoid horizontal scroll using CSS?

    How to keep navigation tab remain unchanged

    How to make a
    container width and height for each same as “the value of clientWidth and clientHeight in maximized window”?

    Slide up/down effect with ng-show and ng-animate

    CSS: how to make a horizontal images scroller with two images per column?

    How to match the last n children with CSS?

    How to position contents according to zoom level?

    Web Extension : How do I use “browser_style = true”?

    How to expand link on hoover? Add “<” “>” symbols around link?

    How to insert instance variable as css rule in Rails?

    How to force wrapper div to keep its optimal width according to its children