Css `过渡：输入框上的宽度1s`增加宽度

使用

转换：宽度1s

和

$（'input'）.css（'width'，'300px'）在转换到300px之前，输入框变为0px宽。
如何从现有宽度过渡到300px

还有一种方法可以从右向左而不是从左向右过渡吗？还是中心静止，左右两侧都增加

html

css

是，在为输入元素指定默认宽度时可以执行以下操作：


我们能否改变增长的方向？从右到左？嗯，我不知道，但我认为不是通过CSS。jQuery可以做到这一点，但我认为我们不会使用transition属性。感谢您的提醒。当您固定输入的
right
属性时，除了向左增长之外，您没有其他选择。（即，
输入{position:relative；right:0；transition:width 2s；width:200px；}
…但我没有测试它。）
<input type='text'> </input>
<button> increase width </button>

$('button').click(function(){
    $('input').css('width', '300px');
});

input {
    transition: width 2s;
    left: 0px
}

input {
    transition: width 2s;
    width:200px; 
}