1

Preciso de uma barra que vá de 0 a 70% e que não volte a 0 apos chegar nos 70, não pode recomeçar o ciclo, tem que parar quando chegar no numero maximo.~

@keyframes site {
    from { width: 0 }
    to { width: 73% }
}

.siteload {
    background: #E7E7E7;
    position: relative;
    height: 25px;
    width: 80%;
    left: 45px;

    border-radius: 6px;
}

.siteload::after {
    border-radius: 6px;
    animation: site 5s infinite ease-in-out;
    background: rgba(247,170,88,1);
    content: '73%';
    position: absolute;
    left: 0; top: 0; bottom: 0;

}

1
  • 1
    Tire o infinite da `animation. Isso é o que faz com que repita Commented 11/07/2018 às 9:02

1 Resposta 1

1

O que faz com que repita é o animation-iteration-count que ficou a infinite:

animation: site 5s infinite ease-in-out;
/*                    ^---- este       */

Esse indica quantas vezes a animação repete, sendo que infinite, como o próprio nome indica, repete infinitamente.

Apesar disso, mesmo sem o infinite a animação irá voltar ao estado inicial após terminar. Para modificar este comportamento pode colocar animation-fill-mode como forwards, que mantem as propriedades aplicadas pela animação.

Combinando estas duas alterações a propriedade animation deve ficar assim:

animation: site 5s ease-in-out forwards;

Veja o seu exemplo a funcionar com essa alteração:

@keyframes site {
    from { width: 0 }
    to { width: 73% }
}

.siteload {
    background: #E7E7E7;
    position: relative;
    height: 25px;
    width: 80%;
    left: 45px;

    border-radius: 6px;
}

.siteload::after {
    border-radius: 6px;
    animation: site 5s ease-in-out forwards; /* linha alterada */
    background: rgba(247,170,88,1);
    content: '73%';
    position: absolute;
    left: 0; top: 0; bottom: 0;

}
<div class="siteload"></div>

1
  • Deu certo, muito obrigado! Commented 11/07/2018 às 11:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .