如何在 CSS 中一个接一个地触发 2 个具有延迟的转换？

Question

我正在制作一个带有 3 个栏的菜单按钮（有时称为汉堡包按钮），单击时会变成 X。我不知道如何在一个元素中触发 2 个变换而不同时触发动画。

这个脚本可以工作，但是它们同时触发：

transform: translate(10px, 10px) rotate(45deg);

我的目标是完成翻译，然后开始旋转。 （我需要使用过渡，因为它们是防垃圾邮件的，不影响关键帧动画。）我尝试过的一件事是使用类似这样的东西：

transform: translate(10px, 10px);
transform: rotate(45deg);

但只有底部的一个会激活。为了解决这个问题，我添加了这个：

transition: transform 0.4s 0.4s, rotate 0.4s 0.4s;

混合，但这只会增加其中一个变换的延迟，而另一个变换仍然会损坏。我的最后一个想法是使用

rotate(deg)

而不是

translate(px)

但似乎没有办法使旋转居中。如果需要，我可以发布我的完整代码。

Answer 1

使用

translate

和

rotate

作为单独的 CSS 属性：

.foo {
  transition: translate 1s 1s, rotate 1s 0s;
}

.foo:focus {
  transition: translate 1s 0s, rotate 1s 1s;
  translate: 10px 10px;
  rotate: 45deg;
}

<button class="foo">Focus me for a demo</button>