Animation in CSS is executed but when it returns to the beginning does not repeat

Navigation
0

The animation slide-in starts in margin-top:0%; width:100%; and ends in margin-top:300px; width:100%; so what this animation does is to go down the text that is written.

But soon after the animation goes down and ends, it returns to margin-top:0% . I need it to stay stable and stop at margin-top:300px or at least, as soon as it's over, repeat the animation.

Here is the code below: 

#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>
    
asked by anonymous 19.04.2017 / 02:24

2 answers

0

The animation was not repeating because you were declaring animation-iteration-count: infinite; in a class that does not exist, which was the class - .slidein .

The animation should be pointing to id #logo-h instead which is the desired element. 

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

To stop the animation at the end of the cycle being completed, that is in margin-top:300px; , use the property forwards instead of 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>
    
19.04.2017 / 03:17
0

Add the: 

animation-iteration-count:infinite;
    
19.04.2017 / 05:59
The Upload takes until it gives an error, only in Chrome! Array result returns null