最后如何停止css3动画？答案

【问题标题】：How to stop css3 animation at the end?最后如何停止css3动画？
【发布时间】：2015-10-27 22:57:21
【问题描述】：

我正在玩 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 类是动态添加到链接字符中的。

【问题讨论】：

标签： css css-animations

【解决方案1】：

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