How to animate decrease in width of a div in a direction?

user_1556759 0
Viewed 88

Well, I am trying to animate decrease in width of a div. I have successfully done it but it decreasing from right to left. I want it decrease from left to right. Please help. 

    .box{height:0%;
         width:830px;
         border-bottom:20px solid #c00;


      -webkit-animation: increase 3s;
      -moz-animation:    increase 3s; 
     -o-animation:      increase 3s; 
     animation:         increase 3s; 
     animation-fill-mode: forwards;

     }

    @keyframes increase {


    100% {
       width: 1px;
    }
   }
animation css html
2 Answers

You can also use Right and Position property of css.

div.b {
  height: 0%;
  border-bottom: 20px solid #c00;
  width: 830px;
  right: 30px;
  position: absolute;
  -webkit-animation: increase 3s;
  -moz-animation: increase 3s;
  -o-animation: increase 3s;
  animation: increase 3s;
  animation-fill-mode: forwards;
}

@keyframes increase {
  100% {
    width: 10px;
  }
<!DOCTYPE html>
<html>

<body>
  <div class="b"></div>


</body>

</html>

user_109991220

Just add float:right to .box class

 
        .box_LtR{
             height:0%;
             width:830px;
             border-bottom:20px solid #c00;  
            -webkit-animation: increase 3s;
            -moz-animation:    increase 3s; 
             -o-animation:      increase 3s; 
             animation:         increase 3s; 
             animation-fill-mode: forwards; 
         }

          @keyframes increase { 
            100% {
               width: 1px;
            }
         }
       
         .box_RtL{
           height:0%;
           width:830px;
           float:right;
           border-bottom:20px solid #c00; 
          -webkit-animation: increase2 3s;
          -moz-animation:    increase2 3s; 
           -o-animation:      increase2 3s; 
           animation:         increase2 3s; 
           animation-fill-mode: forwards; 
          }

        @keyframes increase2 {  
          100% {
             width: 1px;
          }
        }

 


 
    <div class="box_LtR">


    </div>

    <div class="box_RtL">


    </div>

Another !

    .box_LtR{
         height:0%;
         width:830px;
         border-bottom:20px solid #c00;  
        -webkit-animation: increase 3s;
        -moz-animation:    increase 3s; 
         -o-animation:      increase 3s; 
         animation:         increase 3s; 
         animation-fill-mode: forwards; 
     }

      @keyframes increase { 
        100% {
           width: 1px;
        }
     }
   
     .box_RtL{
       height:0%;
       width:1px;
       border-bottom:20px solid #c00; 
      -webkit-animation: increase2 3s;
      -moz-animation:    increase2 3s; 
       -o-animation:      increase2 3s; 
       animation:         increase2 3s; 
       animation-fill-mode: forwards; 
      }

    @keyframes increase2 {  
      100% {
         width: 830px;
      }
    }
<div class="box_LtR">


</div>

<div class="box_RtL">


</div>

user_112588660
Related