CSS Transition不适用于“汉堡包”按钮

Question

I made a hamburger button and I'm trying to animate spans to create a cross.

My transition doesn't work and I don't know why... I found that sometimes transitions doesn't work on chrome so I've used webkit prefix but it didn't help :(

This is my HTML code:

<div class="main__box__nav__hamburger">
    <span class="line line1"></span>
    <span class="line line2"></span>
    <span class="line line3"></span>
</div>

CSS code:

.main__box__nav__hamburger {
  min-width: 30px;
  height: 20px;
  margin: 45px 10px;
  position: relative;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) .5s;
}
.line {
  position: absolute;
  min-width: 30px;
  height: 4px;
  border-radius: 2px;
  background: #000;
}
.line2 {
  top: 8px;
}
.line3 {
  top: 16px;
}
.main__box__nav__hamburger.close .line1 {
  transform: rotate(45deg);
  top: 50%;
}
.main__box__nav__hamburger.close .line2, .main__box__nav__hamburger.close .line3 {
  transform: rotate(-45deg);
  top: 50%;
}

Answer 1

That is because you are applying the transition to the parent element (the hamburger itself), instead of to its children. Remember that transition is not inherited.

Move the transition property to the .line selector and it will work:

.line {
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) .5s;
}

See proof-of-concept below (I have added some minimal JS, so clicking on the hamburger will toggle the close class needed to visualize the transition):

 var burger = document.querySelector('.main__box__nav__hamburger'); burger.addEventListener('click', function() { this.classList.toggle('close'); }); 

 .main__box__nav__hamburger { min-width: 30px; height: 20px; margin: 45px 10px; position: relative; } .line { position: absolute; min-width: 30px; height: 4px; border-radius: 2px; background: #000; transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) .5s; } .line2 { top: 8px; } .line3 { top: 16px; } .main__box__nav__hamburger.close .line1 { transform: rotate(45deg); top: 50%; } .main__box__nav__hamburger.close .line2, .main__box__nav__hamburger.close .line3 { transform: rotate(-45deg); top: 50%; } 

 <div class="main__box__nav__hamburger"> <span class="line line1"></span> <span class="line line2"></span> <span class="line line3"></span> </div>