2

I have a 29 frame animation of a tree growing and I want it to stop on the last frame, (when it's fully grown.) I've been trying to look for a solution to have it stop on the last frame, but nothing seems to be affecting it. I can either get it to loop, or just reset to the first frame.

Can someone please explain to me why this animation keeps just resetting back to the first frame? Thanks so much!

Here is the code I have at the moment:

.tree-right {
-webkit-animation: treeright 2.0s steps(29);
-moz-animation: treeright 2.0s steps(29);
-ms-animation: treeright 2.0s steps(29);
-o-animation: treeright 2.0s steps(29);
animation: treeright 2.0s steps(29);
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}


@-webkit-keyframes treeright {
from { background-position:    0px; }
to { background-position: -5310px; }

}

@-moz-keyframes treeright {
from { background-position:    0px; }
to { background-position: -5310px; }
}

@-ms-keyframes treeright {
from { background-position:    0px; }
to { background-position: -5310px; }
}

@-o-keyframes treeright {
from { background-position:    0px; }
to { background-position: -5310px; }
}

@keyframes treeright {
from { background-position:    0px; }
to { background-position: -5310px; }

}
James Barracca
  • 465
  • 2
  • 6
  • 14
  • Do you have a live example we can view? Such as a codepen or jsfiddle? Difficult to help if we can't see the behavior. – BJack Jun 25 '13 at 19:18
  • Just a guess, but try moving 'animation-fill-mode: forwards;' to 'animation: treeright 2.0s steps(29) forwards;' and see if that helps. – Christofer Vilander Jun 25 '13 at 20:03

5 Answers5

1

Here last frame you mean is background-position: -5310px; you can stop in the same position by using -webkit-animation-fill-mode: forwards;.

For more clarification. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

Hope this will work.

Nithyanandan Sathiyanathan
  • 1,423
  • 2
  • 18
  • 35
1

Use steps(28) if you have 29 frames and for the background-position offset use 28*(height of your frames). I just figured this out. Also, the background-position property requires two values. You always have to specify both X and Y offsets, I believe.

JSFiddle example

hawk
  • 2,655
  • 2
  • 16
  • 11
0

Without more info its hard to gauge what the root issue is, however have you tried setting the iteration limit to 1?

    -webkit-animation-iteration-count: 1;
       -moz-animation-iteration-count: 1;
         -o-animation-iteration-count: 1;
            animation-iteration-count: 1;
BJack
  • 2,404
  • 1
  • 13
  • 11
0

I would say it is working ok.

I have prepared ths fiddle,

[http://jsfiddle.net/vals/REkbW/]

copying your code, and changing just the animation from background-position to background-color to check it easily (and because I don't have your background image); it works ok for me

vals
  • 61,425
  • 11
  • 89
  • 138
  • This works with background-color but not with background-position, it seems. Tested in FF30, Chrome 35 and Opera 12.16. Trying to make this work for a project. – hawk Jun 15 '14 at 20:29
  • @hawk Can you show your code ? – vals Jun 15 '14 at 20:51
  • Yep, see the test case at my Bugzilla ticket: https://bugzilla.mozilla.org/show_bug.cgi?id=1025696 – hawk Jun 16 '14 at 00:42
  • Nevermind. I think I got to the bottom of this. See my [answer here](http://stackoverflow.com/questions/17304821/css-keyframe-animation-wont-stop-on-last-frame/24235618#24235618). Friggin' off-by-one errors! – hawk Jun 16 '14 at 01:31
0

I've noticed this sometimes only works for items which are position:absolute

Hope this works for you!

dijipiji
  • 3,063
  • 1
  • 26
  • 21