0

A animação slide-in começa no margin-top:0%; width:100%; e termina no margin-top:300px; width:100%; então o que esta animação faz é descer o texto que está escrito.

Mas logo depois que desce e termina a animação, ele volta ao margin-top:0%. Preciso que ela fique estável e pare no margin-top:300px ou que pelo menos, assim que acabe, repita a animação.

Aqui está o código abaixo:

#logo-h {
  animation-duration: 3s;
  animation-name: slidein;
  z-index: 5;
  text-align: center;
}
.slidein {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
  animation-name: slidein;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-moz-keyframes slidein {
  from {
    margin-top:0%;
    width:100%
  }

  to {
    margin-top:300px;
    width:100%;
  }
}

@-webkit-keyframes slidein {
  from {
    margin-top:0%;
    width:100%
  }

  to {
   margin-top:300px;
   width:100%;
 }
}
@-ms-keyframes slidein {
  from {
    margin-top:0%;
    width:100%
  }

  to {
   margin-top:300px;
   width:100%;
 }
}
@-o-keyframes slidein {
  from {
    margin-top:0%;
    width:100%
  }

  to {
   margin-top:300px;
   width:100%;
 }
}

@keyframes slidein {
  from {
    margin-top:0%;
    width:100%
  }

  to {
   margin-top:300px;
   width:100%;
 }
}
<div id="logo-h">teste</div>

2
  • Esclareça seu problema específico ou acrescente outros detalhes para destacar exatamente o que precisa. Do modo como está escrito aqui, é difícil saber exatamente o que você está perguntando.
    – Asura Khan
    Commented 19/04/2017 às 0:29
  • A animação começa slide-in começa no margin-top:0%; width:100%; e termina no margin-top:300px; width:100%; então o texto que está escrito desce. Mas logo depois que desce e termina a animação ele volta ao margin-top:0%. Preciso que ela fique estável e pare no no margin-top:300px ou que pelo menos, assim que acabe, repita a animação Commented 19/04/2017 às 0:38

2 Respostas 2

0

A animação não estava a repetir porque estavas a declarar o animation-iteration-count: infinite; em uma classe que não existe, que era a classe - .slidein.

A animação deveria estar a ser apontada para o id #logo-h em vez disso que é o elemento pretendido.

#logo-h {
  z-index: 5;
  text-align: center;
  -moz-animation: slidein 3s infinite;
  -webkit-animation: slidein 3s infinite;
  animation: slidein 3s infinite;
  width:100%
}

@-moz-keyframes slidein {
  from {margin-top:0%;}
  to {margin-top:300px;width:100%;}
}
@-webkit-keyframes slidein {
  from {margin-top:0%;}
  to {margin-top:300px;}
}
@-o-keyframes slidein {
  from {margin-top:0%;}
  to {margin-top:300px;}
}
@keyframes slidein {
  from {margin-top:0%;}
  to {margin-top:300px;}
}
<div id="logo-h">teste</div>

Para parar a animação no final do ciclo ser completado, ou seja no margin-top:300px;, utiliza a propriedade forwards em vez de infinite.

#logo-h {
  z-index: 5;
  text-align: center;
  -moz-animation: slidein 3s forwards;
  -webkit-animation: slidein 3s forwards;
  animation: slidein 3s forwards;
  width:100%
}

@-moz-keyframes slidein {
  from {margin-top:0%;}
  to {margin-top:300px;width:100%;}
}
@-webkit-keyframes slidein {
  from {margin-top:0%;}
  to {margin-top:300px;}
}
@-o-keyframes slidein {
  from {margin-top:0%;}
  to {margin-top:300px;}
}
@keyframes slidein {
  from {margin-top:0%;}
  to {margin-top:300px;}
}
<div id="logo-h">teste</div>

2
  • Mas como faço para parar o loop e parar de repetir e simplesmente executar a animação e parar no margin-top 300px? Commented 19/04/2017 às 1:32
  • @JoãoRocha editei a minha resposta, dá uma olhada no final da mesma onde diz Exibir trecho de código
    – Chun
    Commented 19/04/2017 às 1:46
0

Adiciona o:

animation-iteration-count:infinite;

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 .