Css3 相同持续时间的动画在同一事件触发时在不同时间结束

Question

我正在尝试使用菜单本身的变换和菜单按钮的宽度变化来创建一个看起来从左侧滑入的菜单。当按下按钮时，这两个动画都是通过 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;}
}

Answer 1

更改此样式：

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

收件人：

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

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

Updated Fiddle

Css3 相同持续时间的动画在同一事件触发时在不同时间结束

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

html

javascript

css

keyframe

css-animations