css - 如何在最后停止css3动画？

Question

我正在玩 css3translateY，但我无法在最后停止动画。

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 类动态添加到链接字符中。

Answer 1

动画 shouldn't work on inline elements所以你需要更改 <span> 的默认显示属性标签为span{display:inline-block;} :

如果您想在菜单项上保留下划线，还需要添加 text-decoration:underline;那些跨度标签:

<强> DEMO