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

问题描述

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

<ul class="list"><li><a href="#">Inicio</a><li><a href="#">Quienes somos</a><li><a href="#">Servicios</a><li><a href="#">Flota</a><li><a href="#">Donde estamos</a><li><a href="#">联系方式</a><li><a href="#">Galeria</a>

这是我的 CSS:

.nav {背景颜色:#A45A52；宽度:100%；文本对齐:居中；边框:10px 实心透明；底边距:50px；}.列表 {列表样式类型:无；}.list li {显示:内联；字体系列:MyFont；白颜色;字体大小:26px；填充:20px；-webkit-transition:全 1 缓解 0；过渡:全 1 缓解 0；边框:1px 实心透明；}.list li:悬停{背景颜色:白色；颜色:#483C32；-webkit-transform: translateY(10px);-moz-transform: translateY(10px);-o-transform: translateY(10px);变换:translateY(10px);边界半径:20%；}

解决方案

这与过渡/动画无关:

<块引用>

CSS 转换模块级别 1

可转换元素是一种元素，其布局受 CSS 框模型控制，该模型是块级或 原子内联级元素，或者其显示属性计算到表格行、表格行组、表格标题组、表格页脚组、表格单元格、或表格标题.

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

更新示例

似乎跨浏览器存在一些不一致之处.您看到的行为(转换重置的位置)发生在 Chrome/IE11 中.

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

.list li {显示:内联块；字体系列:MyFont；白颜色;字体大小:26px；填充:20px；-webkit-transition:全 1 缓解 0；过渡:全 1 缓解 0；边框:1px 实心透明；}

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>

And this is my 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%;
}

解决方案

This has nothing to do with transitions/animations:

CSS Transforms Module Level 1

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.

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

Updated Example

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

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(变换)制作了一个动画，并在动画结束时重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！