CSS animate does not stop at the last keyframe

Question

CSS animate does not stop at the last keyframe

Navigation

#1 by (2 votes)
#2 by (0 votes)

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 tested it in various browsers and also adjusting -webkit-

I also tested FROM-TO

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

 to {
margin-top: 1px;
 }

}

css

asked by anonymous 19.02.2016 / 13:45

2 answers

0

Is it ... I solved the problem, in fact as I was using javascript to animate some parts this gave a small BUG because it removed and adds the CSS class, and of course it was going to give a bug, but the above code works perfectly without the java I had the problem! blz?

23.02.2016 / 21:15

IOS - Prevent keyboard from hiding Text Field? [duplicate] How to check if something was passed to the php page?

score 2 · Accepted Answer

One way out 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 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>