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