Animation that reveals element from left to right

Asked

Viewed 55 times

2

I have a <mat-divider></mat-divider> and I need to get it revealed from left to right, as if it were a progress bar being filled

Does anyone have an example to introduce me? I could only find with javascript

@Edit:

Adding example:

@-moz-keyframes roll {
	0% { width:0; }
  100% { width:100%; }
}

@-webkit-keyframes roll {
	0% { width:0; }
  100% { width:100%; }
}

.multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
    content: counter(stepNum);
    font-family: inherit;
    font-weight: 700;
  }
  .multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
    background-color: #ededed;
  }

  .multi-steps > li.is-active-acao-lojista:before, .multi-steps > li.is-active-acao-lojista ~ li:before {
    content: counter(stepNum);
    font-family: inherit;
    font-weight: 700;
  }
  .multi-steps > li.is-active-acao-lojista:after, .multi-steps > li.is-active-acao-lojista ~ li:after {
    background-color: #ededed;
  }
  
  .multi-steps {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  
  .multi-steps > li {
    counter-increment: stepNum;
    text-align: center;
    display: table-cell;
    position: relative;
    color: #a1c642;
    z-index:99!important;
    
  }

  .multi-steps > li.is-active {
    color: #a1c642!important;
    
  }

  .multi-steps > li.is-active-acao-lojista {
    color: darkorange!important;
    
  }

  .multi-steps > li:before {
    content: '\f00c';
    content: '\2713;';
    content: '\10003';
    content: '\10004';
    content: '\2713';
    display: block;
    margin: 0 auto 4px;
    background-color: #fff;
    width: 36px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    font-weight: bold;
    border-width: 2px;
    border-style: solid;
    border-color: #a1c642;
    border-radius: 50%;

  }
  .multi-steps > li:after {
    content: '';
    height: 2px;
    width: 100%;
    background-color: #a1c642;
    position: absolute;
    top: 16px;
    left: 50%;
    z-index: -1;
  }


  .multi-steps > li:last-child:after {
    display: none;
  }
  .multi-steps > li.is-active-acao-lojista:before {
    background-color: #fff;
    border-color: darkorange;
  }
  .multi-steps > li.is-active:before {
    background-color: #fff;
    border-color: #a1c642;;
    
  }
  .multi-steps > li.is-active ~ li {
    color: #808080;
    
  }
  .multi-steps > li.is-active ~ li:before {
    background-color: #ededed;
    border-color: #ededed;
    
  }

  .multi-steps > li.is-active-acao-lojista ~ li {
    color: #808080;
  }
  .multi-steps > li.is-active-acao-lojista ~ li:before {
    background-color: #ededed;
    border-color: #ededed;
  }
                                    <ul class="list-unstyled multi-steps">
                                      <li>Pedido recebido</li>
                                      <li [class.is-active]="pedido.status == 'book_product' && pedido.id_Nota_fiscal == null">Pagamento aprovado</li>
                                      <li [class.is-active-acao-lojista]="pedido.status == 'payment_received' && pedido.id_Nota_fiscal == null">Faturar pedido</li>
                                      <li [class.is-active-acao-lojista]="pedido.status == 'payment_received' && pedido.id_Nota_fiscal !== null">Enviar dados rastreio</li>
                                      <li>Confirmar entrega</li>
                                    </ul>

I need to apply the roll animation to the last li:after element that has the background-color #a1c642

I tried to:

  .multi-steps > li:after:last-child{
      animation-name: roll;
      animation-duration: 5s;
      animation-timing-function: linear;
  }

but nothing happens

html scss

  • Look if that’s what you need https://answall.com/questions/262900/como-fazer--barra-progression-que-v%C3%A1-de-0-a-100-only-with-css/334153#334153

  • I added an Edit to show more information

  • See the EDIT I did in response

1 answer

2


Your CSS has a problem building this class.

That: 

.multi-steps > li:after:last-child

That should be it: 

.multi-steps > li:last-child:after

Note the position of ::after

Another problem is the logic of what you want to do, notice that if you will animate the ::after of last-child he’ll cheer out the "component"... I don’t know if that’s what you want.

EDIT

Note that in the CSS of your comment you wrote wrong! In the last line you ended up zeroing out all the values of your animation when writing

animation: forwards !important;

This way you leave everything "zeroed" and the only parameter of the animation is the forwards then the animation doesn’t work!

The right thing would be:

animation-fill-mode: forwards !important;

inserir a descrição da imagem aqui

I recommend this reading: CSS must be Shorthand or Longhand

Follow the code of the image above, I believe that with it you can reach the result you expect.

@-moz-keyframes roll {
  0% { width:0; }
  100% { width:100%; }
}

@-webkit-keyframes roll {
  0% { width:0; }
  100% { width:100%; }
}

.multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
    content: counter(stepNum);
    font-family: inherit;
    font-weight: 700;
  }
  .multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
    background-color: #ededed;
  }

  .multi-steps > li.is-active-acao-lojista:before, .multi-steps > li.is-active-acao-lojista ~ li:before {
    content: counter(stepNum);
    font-family: inherit;
    font-weight: 700;
  }
  .multi-steps > li.is-active-acao-lojista:after, .multi-steps > li.is-active-acao-lojista ~ li:after {
    background-color: #ededed;
  }
  
  .multi-steps {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  
  .multi-steps > li {
    counter-increment: stepNum;
    text-align: center;
    display: table-cell;
    position: relative;
    color: #a1c642;
    z-index:99!important;
    
  }

  .multi-steps > li.is-active {
    color: #a1c642!important;
    
  }

  .multi-steps > li.is-active-acao-lojista {
    color: darkorange!important;
    
  }

  .multi-steps > li:before {
    content: '\f00c';
    content: '\2713;';
    content: '\10003';
    content: '\10004';
    content: '\2713';
    display: block;
    margin: 0 auto 4px;
    background-color: #fff;
    width: 36px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    font-weight: bold;
    border-width: 2px;
    border-style: solid;
    border-color: #a1c642;
    border-radius: 50%;

  }
  .multi-steps > li:after {
    content: '';
    height: 2px;
    width: 100%;
    background-color: #a1c642;
    position: absolute;
    top: 16px;
    left: 50%;
    z-index: -1;
  }


  .multi-steps > li:last-child:after {
    display: none;
  }
  .multi-steps > li.is-active-acao-lojista:before {
    background-color: #fff;
    border-color: darkorange;
  }
  .multi-steps > li.is-active:before {
    background-color: #fff;
    border-color: #a1c642;;
    
  }
  .multi-steps > li.is-active ~ li {
    color: #808080;
    
  }
  .multi-steps > li.is-active ~ li:before {
    background-color: #ededed;
    border-color: #ededed;
    
  }

  .multi-steps > li.is-active-acao-lojista ~ li {
    color: #808080;
  }
  .multi-steps > li.is-active-acao-lojista ~ li:before {
    background-color: #ededed;
    border-color: #ededed;
  }
  
  .multi-steps > li:after{ 
  width: 0!important; 
  animation-name: roll !important; 
  animation-timing-function: linear !important; 
  animation-duration:5s !important; 
  animation-fill-mode: forwards !important; 
}

  
<ul class="list-unstyled multi-steps">
  <li>Pedido recebido</li>
  <li [class.is-active]="pedido.status == 'book_product' && pedido.id_Nota_fiscal == null">Pagamento aprovado</li>
  <li [class.is-active-acao-lojista]="pedido.status == 'payment_received' && pedido.id_Nota_fiscal == null">Faturar pedido</li>
  <li [class.is-active-acao-lojista]="pedido.status == 'payment_received' && pedido.id_Nota_fiscal !== null">Enviar dados rastreio</li>
  <li>Confirmar entrega</li>
</ul>

  • It’s not quite what I need :/ I think I need to apply at the angle a class fillStatus that would be something like: . fillStatus{ . multi-steps > li:after{ width: 0!Important; Animation-timing-Function: linear! Important; Animation-name: roll! Important; Animation-Duration:5s! Important; Animation: forwards! Important; } }

  • But this way is not applying the animation in li

  • @Renatoveronese but your CSS is wrong, you will put all the parameters of the animation and then in the last line you put animation: forwards!important; write thus eliminates all other values you put in animation... the right would be to write animation-fill-mode: forwards !important; . Notice that I edited the CSS of my reply and left the details there.

Browser other questions tagged html scss

You are not signed in. Login or sign up in order to post.