sIiiS sIiiS - 3 months ago 10
CSS Question

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;

Answer

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.