CODEWITHSUNDEEP
css
Sangram Singh
Sangram Singh

Reputation: 7191

transition: width Change direction

The default change of direction of CSS3 property transition: width 1s is to increase the width from left to right.

How is it possible to reverse the direction to right to left? Is it possible in CSS3? or some other jQuery plugin will be required? please look at the demo fiddle. When you press button the width increases left to right. I want to reverse that.

Upvotes: 6

Views: 14175

Answers (2)

narangrajeev81
narangrajeev81

Reputation: 369

See this example, I have applied css for both mozilla and webkit.

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;

Upvotes: 3

Itay
Itay

Reputation: 16785

One way is to put them inside a right aligned container.

jsFiddle Demo

HTML:

<div>
    <input type='text'> </input>
    <button> increase width </button>
</div>

CSS:

div {    
    text-align: right;
    width: 450px;
}

Upvotes: 8

Related Questions