CSS Animate does not stop at last keyframe

Asked

Viewed 133 times

1

I made a simple animation with keyframe and when running it does not stop at 100% and yes back at the beginning of my CSS animation, see:

 .mostramenu

{
animation: desce 2s;
-webkit-animation: desce 2s;

}

@keyframes desce {

0% {
margin-top: -70px;

}


100% {
margin-top: 1px;

}


}

What could be wrong? I have tested in several browsers and also adjusting -webkit-

I also tested FROM - TO

@keyframes desce {
  from {
    margin-top: -70px;
}

 to {
margin-top: 1px;
 }

}
css

  • Da para melhorar o exemplo ? put an html too

  • It’s just that I made an animation with JS, when the scrooll goes to a point it applies CSS with this animation, but the animation goes from the key 100% it doesn’t stop at 1px of margin-top back to the -70px; basically HTML is something <div class="mostramenu"><nav>...</nav></div>

  • There is a tool on the site that is possible to put your html,css and js code so that it runs and we can see.. click edit and take a look at the editing tools.

2 answers

2


One output is to specify how many times the animation will occur:

animation-iteration-count: 1

In operation:

* {position:relative}

div {width:100px;height:100px;background:#ff9}

.mostramenu {
  animation: desce 2s;
  -webkit-animation: desce 2s;
  -moz-animation: desce 2s;
  -o-animation: desce 2s;
}

#d1 {
  position:absolute;left:50px;
  animation-iteration-count:infinite;
  -webkit-animation-iteration-count:infinite;
  -moz-animation-iteration-count:infinite;
  -o-animation-iteration-count:infinite;
}

#d2 {
  position:absolute;left:200px;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  -moz-animation-iteration-count:1;
  -o-animation-iteration-count:1;
}

#d3 {
  position:absolute;left:350px;
  animation-iteration-count:5;
  -webkit-animation-iteration-count:5;
  -moz-animation-iteration-count:5;
  -o-animation-iteration-count:5;
}


@keyframes desce {
  0%   { margin-top: -70px; }
  100% { margin-top: 1px;   }
}
<div class="mostramenu" id="d1">Infinite</div>
<div class="mostramenu" id="d2">1x</div>
<div class="mostramenu" id="d3">5x</div>

Using the short syntax:

* {position:relative}

div {width:100px;height:100px;background:#ff9}


#d1 {
  position:absolute;left:50px;
  animation: desce 2s infinite;
  -webkit-animation: desce 2s infinite;
  -moz-animation: desce 2s infinite;
  -o-animation: desce 2s infinite;
}

#d2 {
  position:absolute;left:200px;
  animation: desce 2s 1;
  -webkit-animation: desce 2s 1;
  -moz-animation: desce 2s 1;
  -o-animation: desce 2s 1;
}

#d3 {
  position:absolute;left:350px;
  animation: desce 2s 5;
  -webkit-animation: desce 2s 5;
  -moz-animation: desce 2s 5;
  -o-animation: desce 2s 5;
}


@keyframes desce {
  0%   { margin-top: -70px; }
  100% { margin-top: 1px;   }
}
<div class="mostramenu" id="d1">Infinite</div>
<div class="mostramenu" id="d2">1x</div>
<div class="mostramenu" id="d3">5x</div>

  • It didn’t work... it’s like this? .mostramenu&#xA;{&#xA; animation: desce 2s;&#xA; -webkit-animation: desce 2s;&#xA; &#xA; animation-iteration-count: 1;&#xA; -webkit-animation-iteration-count: 1;&#xA;}

  • @Josiasviskoo has two statements in the answer, one using the property separately, and the other aggregating the score in the immature.

  • Very good, I’m testing... already publish here the result... thank you!

0

It’s... solved the problem, actually as it was using javascript to animate some parts it gave a small BUG because it removes and adds the CSS class, and this of course would give a bug, but the above code works perfectly without the java I had the problem! blz?

Browser other questions tagged css

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