"from"和 "to"状态下的 CSS 转换值

Question

当从“状态 A”移动到“状态 B”时，我一直在尝试使用 transition-delay，但在返回状态 A 时没有延迟。这是一个普遍问题关于 CSS 规范是否规定过渡的设置应该是过渡开始时的设置或正在过渡到的状态的设置。这是一个例子:

.menu {
    transform: translateX(0%);
    transition: transform 1s ease-out;
}

.menu.is-open{
    transform: translateX(100%);
    transition: transform 5s ease-out;
}

开场动画应该1秒还是5秒？

我的代码稍微复杂一些，因为它使用了延迟，但基本上可以归结为这一点。

.menu {
    transform: translateX(0%);
    transition: transform 0.5s ease-out 0;
}

.menu.is-open {
    transform: translateX(100%);
    transition: transform 0.5s ease-out 0.5s;
}

当我在 Chrome 或 Firefox 中尝试此操作时，打开菜单时出现延迟，关闭菜单时没有延迟，但在 IE11/Edge 中，它的行为与没有设置延迟时一样。所以我不确定这是否是一个浏览器错误，或者我是否误解了过渡的工作原理，因此我更普遍的问题是使用哪些过渡。

Answer 1

应该是transition:transform而不是transition:translate 转换规则接受 CSS 属性而不是值

---

尝试颠倒顺序，以便 .menu 获得半秒延迟

.menu{
    transform: translateX(0%);
    transition: transform 0.5s 0.5s ease-out;
}

.menu.is-open{
    transform: translateX(100%);
    transition: transform 0.5s 0s ease-out;
}

关于不能在IE下工作，参见vendor prefixes对于过渡和变换