当Css3动画被相同的事件触发时，具有相同持续时间的动画在不同的时间结束

Css3 animations with same durations end at different times when triggered by the same event

本文关键字：动画 持续时间 结束 时间 Css3 事件      更新时间：2023-09-26

我试图创建一个菜单，使用菜单本身的变换和菜单按钮的宽度变化，似乎从左边滑动。当按钮被按下时，两个动画都是通过javascript触发的。

如果持续时间设置为相同的数字，则按钮移动到菜单前面，并在不同的时间结束。如果调整持续时间，使它们在同一时间结束，即使两者都使用线性计时功能，它们也会轮流超越彼此。

这似乎完全不合逻辑，相同的持续时间和时间如何以不同的速度和长度显示?

我在我的网站上克隆了关于这个问题的代码，它可以在https://jsfiddle.net/3g83t54t/找到，为了更快的参考，这里是我分配的关键帧和动画规则。

a#menu.closed:hover{
    -webkit-animation:button_fade .1s ease-in forwards;
    margin:0;
    padding:0 7px 0 4px;
    width: 50px;
}
    a#menu.closed:hover div.blurb{
    -webkit-animation:button_blurb_fade .1s ease-in forwards;
    }
    a#menu.open{
    -webkit-animation:button_stretch 1s linear forwards;
    padding: 0 4px;
        width: 100%;
    }
div#sl_nav{
    -webkit-animation:menu_slide_in 1s linear forwards;
}
@-webkit-keyframes button_blurb_fade{
    to{
        background-color: #fff;
    }
}
@-webkit-keyframes button_fade{
    to{
        background: #fff;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
    }
}
@-webkit-keyframes menu_slide_in {
    from{-webkit-transform:translateX(-326px);}
    to{-webkit-transform:translateX(0);}
}
@-webkit-keyframes button_stretch {
    from{width: 50px;}
    to{max-width: 377px;}
}

更改样式:

@-webkit-keyframes button_stretch {
    from{width: 50px;}
    to{max-width: 377px;}
}

: 

@-webkit-keyframes button_stretch {
    from{width: 50px;}
    to{width: 377px;}
}

我想告诉你为什么，但我真的不知道。;)我认为 max-width导致按钮对其他也在调整大小的元素做出更多响应，这就是它滞后的原因。通过指定width，您只是强制它是这个大小，没有让步。

更新小提琴

相关文章：