Как оживить уменьшение ширины делителя по направлению? - PullRequest
Новая
       0

Как оживить уменьшение ширины делителя по направлению?

2 голосов
/ 31 марта 2020

Ну, я пытаюсь оживить уменьшение ширины div. Я успешно сделал это, но он уменьшается справа налево. Я хочу, чтобы оно уменьшалось слева направо. Пожалуйста помоги. 

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

Ответы [ 2 ]

3 голосов
/ 31 марта 2020

Вы также можете использовать свойство Right и Position 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>
1 голос
/ 31 марта 2020

Просто добавьте float:right к .box классу 

 
        .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>

Другое! 

    .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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...