css - 过渡：宽度改变方向

Question

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

如何将方向从右向左反转？在 CSS3 中可以吗？还是需要其他一些 jQuery 插件？请看演示小提琴。当您按下按钮时，宽度从左到右增加。我想扭转这种局面。

Answer 1

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

jsFiddle 演示

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;