我用 CSS（变换）制作了一个动画，动画结束时它会重置答案

【问题标题】：I've made an animation with CSS (transform) and it resets when the animation ends我用 CSS（变换）制作了一个动画，动画结束时它会重置
【发布时间】：2014-10-13 01:59:53
【问题描述】：

我有以下结构，我的问题是，当动画结束时，它正在替换它只是重新启动，我想知道它是否会在它悬停时停止 nad 在 finle 中等待，谢谢，这是代码：http://jsfiddle.net/bd4c5cc7/

<div class="nav">
    <ul class="list">
        <li>
            <a href="#">Inicio</a>
        </li>
        <li>
            <a href="#">Quienes somos</a>
        </li>
        <li>
            <a href="#">Servicios</a>
        </li>
        <li>
            <a href="#">Flota</a>
        </li>
        <li>
            <a href="#">Donde estamos</a>
        </li>
        <li>
            <a href="#">Contacto</a>
        </li>
        <li>
            <a href="#">Galeria</a>
        </li>
    </ul>
</div>

这是我的 CSS：

.nav {
    background-color: #A45A52;
    width: 100%;
    text-align: center;
    border: 10px solid transparent;
    margin-bottom: 50px;
}

.list {
    list-style-type: none;
}

.list li {
    display: inline;
    font-family: MyFont;
    color: white;
    font-size: 26px;
    padding: 20px;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    border: 1px solid transparent;
}

.list li:hover {
    background-color: White;
    color: #483C32;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
    border-radius: 20%;
}

【问题讨论】：

在 Firefox 上的 jsfiddle 中运行良好； jsfiddle.net/wrpkgcvp
它不会为我重新启动（osx / chrome），它只是跳回，但圆形边框和白色背景仍然存在......

标签： html css css-animations

【解决方案1】：

这与过渡/动画无关：

CSS Transforms Module Level 1

可变形元素是一种元素，其布局由块级或atomic inline-level element 的 CSS 盒模型控制，或者其显示属性计算为 table-row、table-row-group、table-header-组、表格页脚组、表格单元格或表格标题。

将列表项的 display 从 inline 更改为 inline-block 应该可以解决此问题。

Updated Example

浏览器之间似乎存在一些不一致之处。您看到的行为（转换重置的位置）发生在 Chrome/IE11 中。

另一方面，FireFox 甚至根本不会转换元素，因为它是不可替换的 inline 级别元素。

.list li {
    display: inline-block;
    font-family: MyFont;
    color:white;
    font-size:26px;
    padding:20px;
    -webkit-transition:all 1s ease 0s;
    transition:all 1s ease 0s;
    border: 1px solid transparent;
}

【讨论】：