转换样式的属性是否可以使用转换延迟

Question

我有类似的属性

transition: top .5s, transform .5s .5s;

通常，为了获得更好的性能，我们应该只使用变换和不透明度来设置动画。

可以这样设置动画吗？

transition: transform(translateY) .5s, transform(rotate) .5s .5s;

document.querySelector(".burger").onclick = function(e) {toggleActive(e)};
function toggleActive({target}) {
target.classList.toggle('active')
}

span {
top: 50%;
transform: translateY(-50%);
transition: background-color 0.1s 0.5s;
}
span, span:before, span:after {
background-color: #555;
height: 5px;
width: 35px;
display: block;
border-radius: 5px;
position: absolute;
animation-duration: 3s;
animation-fill-mode: forwards;
}

span:before, span:after {
content: '';
}
.basic:before, .basic:after {
transition: transform 0.5s, top 0.5s 0.5s;
}
span:before {
top: 200%;
}
span:after {
top: -200%;
}
.basic.active {
background-color: rgba(0, 0, 0, 0);
}
.basic.active:before {
transform: rotate(-45deg);
}
.basic.active:after {
transform: rotate(45deg);
}
.basic.active:before, .basic.active:after {
top: 0;
transition: top 0.5s, transform 0.5s 0.5s;
}

<span class="burger basic"></span>

在这种情况下，我确实使用了top属性。我想转换transform的性质。

我不需要任何使用JS的补丁。唯一的问题是是否存在这种可能性。我可以补充一点，我最初使用的是SCSS。

Answer 1

如果你添加更多的元素，你可以很容易地完成。我还优化了代码以删除背景转换，所以我们只保留转换转换：

document.querySelector(".burger").onclick = function(e) {
document.querySelector(".burger").classList.toggle('active')
};

.burger {
top: 50%;
transform: translateY(-50%);
transition: transform 0.5s;
background-color: #555;
height: 5px;
width: 35px;
position: absolute;
border-radius: 5px;
cursor: pointer;
}
.burger div:before {
content: '';
display: block;
height: 100%;
background-color: #555;
border-radius: 5px;
transition: transform 0.5s;
}
.burger div {
position: absolute;
height: 100%;
width: 100%;
transition: transform 0.5s 0.5s;
transform: translateY(-200%);
}
.burger div:last-child {
transform: translateY(200%);
}
.basic.active {
transform: translateY(-50%) rotate(-45deg);
transition: transform 0.5s 0.5s;
}
.basic.active div {
transform: translateY(0%);
transition: transform 0.5s;
}
.basic.active div:last-child::before {
transform: rotate(90deg);
transition: transform 0.5s 0.5s;
}

<div class="burger basic">
<div></div>
<div></div>
</div>