为什么 W3schools 图标没有动画

Question

我已按照说明进行操作，甚至尝试复制和粘贴。 （ https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js ），但是 animation 没有完全发挥作用？ 这些条不会变成 X，而是在 animation 中途重置。

知道可能是什么原因造成的吗？ 我已经包含了下面的代码。

 function myFunction(x) { x.classList.toggle("change"); }

 .menu-container { display: inline-block; cursor: pointer; }.bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #fff; margin: 6px 0; transition: 0.4s; }.change.bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); }.change.bar2 {opacity: 0;}.change.bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); }

 HTML <div class="menu-container" onClick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div>

Answer 1

更新.bar1检查片段的translate 。

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-8px, 8px);
  transform: rotate(-45deg) translate(-8px, 8px);
}

 function myFunction(x) { x.classList.toggle("change"); }

 .container { display: inline-block; cursor: pointer; }.bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s; }.change.bar1 { -webkit-transform: rotate(-45deg) translate(-8px, 8px); transform: rotate(-45deg) translate(-8px, 8px); }.change.bar2 {opacity: 0;}.change.bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -7px); }

 <p>Click on the Menu Icon to transform it to "X":</p> <div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div>