Animation in CSS is executed but when it starts again it does not repeat

Asked

Viewed 320 times

0

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

But right after he comes down and finishes the animation, he goes back to margin-top:0%. I need her 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>

html css css3 animation css-animations

  • Clarify your specific issue or add other details to highlight exactly what you need. The way it’s written here, it’s hard to know exactly what you’re asking.

  • The animation starts slide-in starts at margin-top:0%; width:100%; and ends at margin-top:300px; width:100%; then the written text goes down. But soon after it goes down and finishes the animation it goes back to the 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

2 answers

0


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

The animation should be pointing to the id #logo-h instead that 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 be completed, i.e. margin-top:300px;, uses 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>

  • But how do I stop the loop and stop repeating and simply run the animation and stop at the margin-top 300px?

  • @Joãorocha edited my answer, take a look at the end of it where it says Exibir trecho de código

0

Adds the:

animation-iteration-count:infinite;

Browser other questions tagged html css css3 animation css-animations

You are not signed in. Login or sign up in order to post.