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;
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; }