Question

我正在玩css3 translateY而且我不会在最后停止动画。

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);
        }
    }

到目前为止，我已尝试过以下帖子的解决方案：

Stopping CSS3 KeyFrames Animation

Stop CSS3 animation jumping

Animation stop with css3

Stopping a CSS3 Animation on last frame

但他们没有为我工作。那么我做错了什么？

HERES THE FIDDLE

注意：tr-up类会动态添加到链接字符中。