Question

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

Answer 1

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>