Question

所以我想创建一个css动画属性，其宽度向左延伸，但它总是向右延伸。我试图想象如何使宽度向左延伸而不是默认向右。我该如何处理这个问题？ JsFiddle下面
Jsfiddle

Html：<div></div>

Css：

div
{
    position:absolute;
    bottom:130px;
    left:130px;
    width:100px;
    height:100px;
    background:red;
    -webkit-transition:width 2s; 
}

div:hover
{
    width:200px;
}

Answer 1

同样调整left值：

Updated Fiddle

div {
    position:absolute;
    bottom:130px;
    left:130px;
    width:100px;
    height:100px;
    background:red;
    -webkit-transition:left 2s, width 2s;
}
div:hover {
    left:30px;
    width:200px;
}

Answer 2

您需要覆盖左侧以向左延伸宽度。您使用left:130px;是您的div的起点。在div:hover上，您仍然没有更改左侧，因此它会自动向右延伸，因为您还设置了bottom:130px;

width:100px;到div:hover的默认width:200px;已更改，因此您需要减少div:hover上的左起始位置。这是Demo。

div {
    position:absolute;
    bottom:130px;
    left:130px;
    width:100px;
    height:100px;
    background:red;
    -webkit-transition:left 2s, width 2s;
}
div:hover {
    left:30px;
    width:200px;
}

如何反转css过渡属性宽度？

2 个答案: