How to stop css3 animation at the end?

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><a href="?type=about">About</a></li>
    <li><a href="?type=projects">Projects</a></li>
    <li><a href="?type=media">Media</a></li>
    <li><a href="?type=schedule">Schedule</a></li>
    <li><a href="?type=contact">Contact</a></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.

score 3 · Accepted Answer · edited May 23 '17 at 11:58

3

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

edited May 23 '17 at 11:58

Community

1
1

answered Dec 16 '14 at 11:19

web-tiki

99,765
32
217
249

the fiddle was just for demonstration the text-decoration wount be displayed in my project but thanks again! – Steven Web Dec 16 '14 at 11:26
@StevenWeb note that I also changed `animation-fill-mode: none;` on `.tr-up` to `animation-fill-mode: forwards;` but I think that was a typo in your fiddle. – web-tiki Dec 16 '14 at 11:28

score 0 · Answer 2 · answered Dec 16 '14 at 11:20

0

Try the add iteration count

animation-iteration-count: 1;

It will be possible

answered Dec 16 '14 at 11:20

SekDinesh

119
8

tryied your solution but there where no changes! thanks for your help! – Steven Web Dec 16 '14 at 11:23

How to stop css3 animation at the end?

2 Answers2