汉堡按钮转换为 X 按钮，但在刷新时不会返回为汉堡按钮

Question

为什么当一个人点击汉堡包按钮转换到X按钮并决定刷新时，X按钮仍然保留?如何在刷新站点后再次出现汉堡包按钮?

这是我的网站链接:http://dannysaavedra.com/photobeta

下面是我的汉堡按钮和X按钮的CSS代码。

只在Firefox浏览器中出现。

/*Begin Hamburger Menu*/
#menu {
  position: fixed;
  top:17px;
  right: 20px;
  height: 28px;
  width: 35px;
  cursor: pointer;
  z-index: 7;
}
.nav-trigger {
  cursor: pointer;
  clip: rect(0, 0, 0, 0);
  position: fixed;
}
label {
  position: absolute;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
#menuButton,
#menuButton:before,
#menuButton:after {
  cursor: pointer;
  position: fixed;
  top: 30px;
  right: 20px;
  z-index: 2;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background-color: white;
  content: '';
}
.nav-trigger:checked + #menuButton:before,
.nav-trigger:checked + #menuButton:after {
  top: 30px;
  right:20px;
  background-color: red;
}
#menuButton:before {
  top: 20px;
}
#menuButton:after {
  top: 40px;
}
.nav-trigger:checked + #menuButton:after {
  transform: rotate(-45deg);
}
.nav-trigger:checked + #menuButton {
  background-color: transparent;
}
.nav-trigger:checked + #menuButton:before {
  transform: rotate(45deg);
}
.nav-trigger + #menuButton:before,
.nav-trigger + #menuButton:after {
  transition: all 200ms ease-in-out;
}
.nav-trigger:checked + #menuButton:before,
.nav-trigger:checked + #menuButton:after {
  transition: all 200ms ease-in-out;
}
.nav-trigger + #menuButton,
.site-wrap {
  transition: left 0.2s;
}
.nav-trigger + #menuButton {
  right: 20px;
  transition: right 0.2s;
  transition: all 10ms ease-in-out;
}
.nav-trigger:checked ~ .site-wrap {
  left: -300px;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
  transition: left 0.2s;
}

Answer 1

编辑:在Firefox中，选中的选项似乎没有重置。我发现了一个类似的主题，建议将autocomplete="off"添加到给定的元素。在这里找到主题。

老:尝试添加-webkit-transition到你所有的过渡，像这样:

-webkit-transition: someTransition;
transition: someTransition;

对于transform也是如此