csscss-transitions

transition ease-out, right to left, how?


ease-out normally move from left to right, now I want change it to right to left How can I set it in my CSS ?

example :

transition:         background-position 150ms ease-out;
-moz-transition:    background-position 150ms ease-out;
-webkit-transition: background-position 150ms ease-out;
-o-transition:      background-position 150ms ease-out;

Solution

  • There's no default direction for transitioning the properties. And ease-out is just a transition timing function:

    From the Spec:

    The transition-timing-function property describes how the intermediate values used during a transition will be calculated. It allows for a transition to change speed over its duration. These effects are commonly called easing functions. In either case, a mathematical function that provides a smooth curve is used.

    The direction of background-position transition, depends on the first and the last values.

    For instance:

    .box {
        /* other styles here... */
        background-image: url(http://lorempixel.com/500/300);
        transition: background-position 150ms ease-out;
    }
    
    /* Move the background image from right to left */
    .box.rtl { background-position: 0 center; }
    .box.rtl:hover { background-position: 100% center; }
    
    /* Move the background image from left to right */
    .box.ltr { background-position: 100% center; }
    .box.ltr:hover { background-position: 0 center; }
    

    WORKING DEMO.