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

Question

我一直在尝试在从 "state A" 移动到 "state 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

Answer 2

看来您正确理解了 transition 的工作原理。查看我的代码片段：

JSFiddle

.hoverable {
    height: 50px;
    background-color: yellow;
}

.moving {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: transform 1s linear 0s;
    transition: -ms-transform 1s linear 0s;
    transition: transform 1s linear 0s;
}

.hoverable:hover + .moving {
    -webkit-transform: translateX(200%);
    -ms-transform: translateX(200%);
    transform: translateX(200%);
    -webkit-transition: transform 0.5s linear 0.5s;
    transition: -ms-transform 0.5s linear 0.5s;
    transition: transform 0.5s linear 0.5s;
}

<div class="hoverable">Hover me</div>
<div class="moving">I can move</div>

在某些情况下可能 transition-timing-function: ease-out seems like delay 适合您，所以我在示例中使用 transition-timing-function: linear 来显示恒定速度的过渡。

红色块从 0% 移动到 200% 0.5s，延迟 0.5s。并立即从 200% 移动到 0% 1s。 transition 的工作原理没有任何魔力。

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

CSS transition values in "from" and "to" states

css

specifications

browser-support

css-transitions