我使用CSS（transform）制作了一个动画，并在动画结束时重置 [英] I've made an animation with CSS (transform) and it resets when the animation ends

问题描述

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

I have the following structure, and my problem is that when the animaition ends that is replacing down it just restart, and I was wondering if there's anyway it just stops nad waits in the finle while its hovered, thanks , here is the 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>

这是我的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框模型，它是块级或原子行内元素 a>，或其显示属性计算为表行，表行组，表头组，表脚注组，表单元格或表标题。

A transformable element is an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption.

将 inline 的显示更改为 inline-block 应修正此问题。

Changing the display of the list items from inline to inline-block should fix this.

更新示例

似乎跨浏览器存在一些不一致。您在Chrome / IE11中看到的行为（过渡重置的地方）。

It seems like there are some inconsistencies across browsers. The behavior you are seeing (where the transition resets) occurs in Chrome/IE11.

另一方面，FireFox甚至不会转换元素，因为它是一个非替换 inline 级别元素。

FireFox, on the other hand, won't even transition the element at all since it is a non-replacing inline level element.

.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;
}

这篇关于我使用CSS（transform）制作了一个动画，并在动画结束时重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！