我将如何扭转CSS转换属性的宽度？ [英] How would I reverse a css transition property width?

问题描述

所以我想制作一个css动画属性，其宽度向左延伸，但它总是向右延伸。我正在尝试计算如何使宽度向左延伸而不是默认的右侧。我应该如何处理这个问题？ JsFiddle低于

Jsfiddle


Html： < div>< / div>

Css：

  div 
 {
 position：absolute; 
 bottom：130px; 
 left：130px; 
 width：100px; 
 height：100px; 
背景：红色; 
 -webkit-transition：width 2s; 
} 
 
 div：hover 
 {
 width：200px; 
 
  

解决方案

调整 left value：

更新小提琴

  div {
 position：absolute; 
 bottom：130px; 
 left：130px; 
 width：100px; 
 height：100px; 
背景：红色; 
 -webkit-transition：left 2s，width 2s; 
} 
 div：hover {
 left：30px; 
 width：200px; 
} 
  

So I want to make a css animation property where the width extends toward the left but it always extends to the right. I am trying to figure how to make the width extend left instead of the default right. How should I approach this problem? JsFiddle below
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;
}

解决方案

Adjust the left value as well:

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;
}

这篇关于我将如何扭转CSS转换属性的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！