How to stop css3 animation at the end? - css

Question

Im playing around with css3 translateY and i'm not abel to stop the animation at the end.
HTML:
<ul id="nav" class="nav-ctn">
<li>About</li>
<li>Projects</li>
<li>Media</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
CSS:
.tr-up {
-moz-animation: tr-up 0.5s ease-in-out;
-o-animation: tr-up 0.5s ease-in-out;
-webkit-animation: tr-up 0.5s ease-in-out;
animation: tr-up 0.5s ease-in-out;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-moz-keyframes tr-up {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-moz-transform: translateY(-3px);
-ms-transform: translateY(-3px);
-o-transform: translateY(-3px);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
}
#-webkit-keyframes tr-up {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-moz-transform: translateY(-3px);
-ms-transform: translateY(-3px);
-o-transform: translateY(-3px);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
}
#keyframes tr-up {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-moz-transform: translateY(-3px);
-ms-transform: translateY(-3px);
-o-transform: translateY(-3px);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
}
So far i have tried the solution form the following posts:
Stopping CSS3 KeyFrames Animation
Stop CSS3 animation jumping
Animation stop with css3
Stopping a CSS3 Animation on last frame
But non of them worked for me.
So what i am doing wrong?
HERES THE FIDDLE
Note: the tr-up class is dynamically added to the link characters.

Answer 1

Animations shouldn't work on inline elements so you need to change the default display property of the <span> tags to span{display:inline-block;} :
If you want to keep the underline on your menu items, you also need to add text-decoration:underline; to those span tags :
DEMO

Answer 2

Try the add iteration count
animation-iteration-count: 1;
It will be possible