Skip to main content
adicionou 125 caracteres ao conteúdo; tags editadas; título editado
Fonte Link
Chun
  • 7,5mil
  • 4
  • 32
  • 57

Minha animação Animação no CSS aconteceé executada mas quando volta onde começou eao início não repete

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

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

aquiAqui está o código do css, no html só existe uma div com o id=logo-h e escrito "teste"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; }

#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>
@-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%;
 }
}
 

Minha animação no CSS acontece mas volta onde começou e não repete

A animação 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

aqui está o código do css, no html só existe uma div com o id=logo-h e escrito "teste":

#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%;
 }
}

Animação no CSS é executada mas quando volta ao início não repete

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>
 

Adicionado uma explicação mais detalhada na descrição, acima do código css
Fonte Link

A animação 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

aqui está o código do css, no html só existe uma div com o id=logo-h e escrito "teste":

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

#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%;
 }
}
#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%;
 }
}

A animação 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

aqui está o código do css, no html só existe uma div com o id=logo-h e escrito "teste":

#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%;
 }
}
adicionou 312 caracteres ao conteúdo
Fonte Link
Caio Felipe Pereira
  • 4,6mil
  • 1
  • 19
  • 40

#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%; } }

#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%;
 }
}

#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%; } }

#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%;
 }
}
Fonte Link
Carregando