How would I reverse a css transition property width?

Question

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 in

Answer 1

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

Answer 2

You need to override your left side in order to extend the width leftward. You have used left:130px; is the starting point of your div. And on div:hover you still didn't change the left so it automatically extends to the rightward as you have also sets the bottom:130px;

Your default width:100px; is change on div:hover to width:200px; so you need to decrease your left starting position on div:hover. Here is a 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;
}