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>