It is possible use transition delay for the properties of transform style?

Question

I have property like this

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

And usually, for better performance, we should use only transform and opacity for animate.

It is possible to animate like this?

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;
}

In this case, I did use top property. And I wanna transition the properties of transform.

I don't need any patches using JS. The only question is whether there is such a possibility at all. I might add that I originally use SCSS.

user_8620333 · Answer

If you add more elements you can easily do it. I have also optimized the code to remove the background transition so we keep only transform transition:

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;
}

It is possible use transition delay for the properties of transform style?

1 Answers