CSS 过渡缓出，从右到左，如何？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22115842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
transition ease-out, right to left, how?
提问by sIiiS
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 ?
缓出通常从左到右移动，现在我想将其更改为从右到左 如何在我的 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;
回答by Hashem Qolami
There's no default directionfor transitioning the properties. And ease-outis just a transition timing function:
没有默认方向为过渡荷兰国际集团的性质。并且ease-out只是一个过渡计时功能：
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.
该
transition-timing-function属性描述了如何计算转换期间使用的中间值。它允许过渡在其持续时间内改变速度。这些效果通常称为缓动函数。在任何一种情况下，都会使用提供平滑曲线的数学函数。
The direction of background-positiontransition, depends on the firstand the lastvalues.
background-position转换方向取决于第一个和最后一个值。
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; }
工作演示。
回答by TienPing
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.
通过将 div 向右浮动，您的 div 将从右侧开始。当它扩展时，它会向左扩展。
回答by Umer Farooq
This is simple,
Like your left to right Transition and if you want right to left Transition just use float:right;when you are styling you Div(ect).
这很简单，
就像你的从左到右的 Transition 一样，如果你想要从右到左的 Transition，只需float:right;在你设计Div(ect)样式时使用。
