CSS转换值在“中”；从「；及；至；州

我一直试图在从“状态a”移动到“状态B”时使用

转换延迟但是在返回到状态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中，它的行为与未设置延迟时一样。因此，我不确定这是否是一个浏览器错误，或者我是否误解了转换是如何工作的，因此我更一般的问题是使用哪些转换。
应该是
转换：转换
，而不是
转换：翻译
转换规则接受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中工作的问题，请参见
转换
和
转换
，您似乎正确理解了如何工作。请参阅我的代码片段：



。可悬停{
高度：50px；
背景颜色：黄色；
}
.搬家{
宽度：100px；
高度：100px；
背景色：红色；
-webkit转换：translateX（0）；
-ms变换：translateX（0）；
变换：translateX（0）；
-webkit转换：转换1s线性0；
转换：-ms转换1s线性0；
转换：转换1s线性0；
}
.可悬停：悬停+移动{
-webkit转换：translateX（200%）；
-ms转化：translateX（200%）；
转化：translateX（200%）；
-webkit转换：转换0.5s线性0.5s；
转换：-ms转换0.5s线性0.5s；
过渡：变换0.5s线性0.5s；
}
将鼠标悬停在我身上
我可以移动
对不起，是的，这在我的示例中是个错误，我将重写它。@Jonhobs颠倒顺序有帮助吗@Aziz你不能只使用
0
，因为，它应该是
0s
。我想我可能按错误的顺序使用了它，但我已经使用了0s而不是0。为了澄清，你需要以下内容：1。从菜单到打开菜单：[无延迟][在半秒钟内转换]2。从打开菜单到关闭菜单：[半秒延迟][半秒转换]