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 can I align a div right under another?

    How to put the faded hover effect on the button?

    I want to apply an existing CSS style to all labels on a page. How?

    HTML/CSS - How to position my image to the right so that it can be aligned with my text on the left?

    How to neaten css shapes?

    How can I add more images to my HTML5/CSS3 Slideshow

    How to remove the vertical white line between the two green divs without floating?

    How to toggle a separate drop down beneath a grid of items using JQuery?

    How to set control properties in css?

    How to add media='screen' in css using cakePHP?

    How to clone the inner html of a list in query and wrap it

    external css loaded but not aplied to html - php codeigniter ssl - how to change css mimetype = text/html to text/css

    How to fluid images when resize window?

    How to color specific word in a container using CSS

    How can I make sure that the footer will always be on the bottom of the last page when printing out?

    How can I switch overlapped elements with CSS transitions?

    How to place a css counter-increment below a paragraph of text?

    How to suppress specific CSS 2.0 validation errors in Visual Studio 2008?

    How to override xhtml theme css?

    How to show the width of an element in the content of an ':after' pseudo-element?

    How to make CSS menu to open menu in in up direction rather than default down direction

    Twitter Bootstrap + Rails, how do you integrate and modify it?

    how to bold words within a paragraph in HTML/CSS?

    How will I change CSS based on classes and id using jQuery

    Icon with overhead label - how to get both to respond to hover, with CSS?

    How do I align this CSS correctly?

    How to simplify my CSS stylesheet?

    How to fade loop background images?

    How to load a apply jQuery function upon appending a
    via Ajax?

    Bootstrap 3 / CSS: How to properly vertically align in panel heading