过渡：宽度改变方向

Question

CSS3属性transition: width 1s的方向的默认更改是从左到右增加宽度。

如何从右到左颠倒方向？ CSS3有可能吗？还是需要一些其他jQuery插件？ 请查看demo fiddle。按下按钮时，宽度从左向右增加。我想扭转这一点。

Answer 1

一种方法是将它们放在right对齐的容器中。

jsFiddle Demo

<强> HTML：

<div>
    <input type='text'> </input>
    <button> increase width </button>
</div>

<强> CSS：

div {    
    text-align: right;
    width: 450px;
}

Answer 2

参见这个例子，我已经为mozilla和webkit应用了css。

http://jsfiddle.net/2D7Ss/39/

-moz-transition: left 1s ease 0.1s, width 0s ease-out 0.1s, border-width 0s ease-out 0.1s;
-webkit-transition: left 1s ease 0.1s, width 0s ease-out 0.1s, border-width 0s ease-out 0.1s;