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

我有以下结构，我的问题是，当动画结束时，替换掉它只是重新启动，我想知道它是否会停止并在悬停时在结尾处等待，谢谢，这里是代码：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%;
}

这与过渡/动画无关：

CSS 转换模块级别 1

可变形元素是其布局由 CSS 盒模型控制的元素，该模型可以是块级或原子内联级元素，或其显示属性计算为 table-row、table-row-group、table-header-group、table-footer-group、table-cell 或 table-caption。

改变display列表项来自inline to inline-block应该解决这个问题。

更新的示例

不同浏览器之间似乎存在一些不一致。您所看到的行为（过渡重置）发生在 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;
}