javascript - 如何在 css 中定义多转换属性？

Question

我正在尝试为不同的过渡属性制作具有不同延迟的翻译动画。当代码如下所示时，动画运行流畅：

.hamburger_button .hamburger_line {
    transition-property: all;
    transition-delay: 0.15s;
    transition-duration: 0.15s;
}

#hamburger_button:active .hamburger_line:nth-child(1) {
    transform: translateY(4.5px) rotate(45deg);
    
}

#hamburger_button:active .hamburger_line:nth-child(2) {
    transform: translateY(-4.5px) rotate(-45deg);
}

但是，如果我想为每个属性定义延迟，动画就消失了：

.hamburger_button .hamburger_line {
    transition-property: translateY, rotate;
    transition-delay: 0.0s, 0.15s;
    transition-duration: 0.15s, 0.15s;
}

#hamburger_button:active .hamburger_line:nth-child(1) {
    transform: translateY(4.5px) rotate(45deg);
    
}

#hamburger_button:active .hamburger_line:nth-child(2) {
    transform: translateY(-4.5px) rotate(-45deg);
}

是否允许定义多个属性的延迟？

标签： javascripthtmlcss