So basically what needs to be done is that, at time 0, the width is 0, and time 1, the width should be increased graduately, from right to left i guess the hardest part is to animate it from 'right to left', i had no problem animating something that increases size from left to right like the following

 @-webkit-keyframes reducetime {
 0% {width: 100%;}
 25% {width: 75%;}
 50% {width: 50%;}
 75% {width: 25%;}
  to {width: 0%;}
}

I prefer solution does not require additional plugin, but feel free to provide solution like that if there is no other way. thanks

So basically what needs to be done is that, at time 0, the width is 0, and time 1, the width should be increased graduately, from right to left i guess the hardest part is to animate it from 'right to left', i had no problem animating something that increases size from left to right like the following

 @-webkit-keyframes reducetime {
 0% {width: 100%;}
 25% {width: 75%;}
 50% {width: 50%;}
 75% {width: 25%;}
  to {width: 0%;}
}

I prefer solution does not require additional plugin, but feel free to provide solution like that if there is no other way. thanks

• javascript
• jquery
• html
• animation
• css

• Can you position the item you're animating absolutely, right: 0; – mikevoermans Commented Apr 18, 2012 at 17:07

2 Answers 2

You can use float:right to place the container on the right:

#abc {
  width: 100%;
  height: 100px;
  background-color: pink;
  animation-name: reducetime;
  animation-duration: 1s;
  float: right;
}

@keyframes reducetime {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

<div id="abc"></div>

The width isn't animated from the left or the right, it's just the content of the div that is positioned from the left edge of the div.

Just position the content relative to the right edge to make it be hidden from the left. Depending on what you have in the div, you might need another container (div) inside it, that you style using position: absolute; right: 0.