Ich habe die folgende Struktur und mein Problem ist, dass, wenn die Animation endet, das Ersetzen beendet wird, es einfach neu gestartet wird, und ich mich gefragt habe, ob es sowieso halt macht und in der Finle wartet, während es schwebt, danke, hier ist der Code: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>

Und das ist mein 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%;
}