"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用于transition 和transform