Menu
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;
877
There's no default direction for transitioning the properties. And ease-out is just a transition timing function:
From the Spec:
The
transition-timing-functionproperty 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.
136
Maybe you can try something like this:
<html>
<head>
<style>
div {
float: right;
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: linear;
text-align: center;
}
div:hover {
width: 300px;
}
body {
width: 500px;
border: solid black 1px;
}
</style>
</head>
<body>
<div>sample</div>
</body>
</html>
By floating the div to the right, you will have your div starting at the right side. And when it expands, it will expand to the left.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
