动画汉堡菜单

Question

我已经编写了这段代码。一切正常，但有一个问题。

当我刷新页面或打开另一个页面时，动画不会恢复正常样式。

这是我的代码：

.hamberger-menu {
  width: 40px;
  height: 40px;
  z-index: 500;
}

.checkbox:checked ~ .hamberger-menu .menu {
  transform: rotateZ(90deg);
}

.checkbox:checked ~ .hamberger-menu .menu-line-1 {
  transform: rotateZ(-40deg);
}

.checkbox:checked ~ .hamberger-menu .menu-line-2 {
  opacity: 0;
}

.checkbox:checked ~ .hamberger-menu .menu-line-3 {
  transform: rotateZ(40deg);
}

.menu {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  justify-content: space-around;
  transition: transform 0.5s;
}

.menu-line {
  width: 100%;
  height: 4px;
  background-color: white;
  transition: all 0.5s 0.5s;
  transform-origin: right;
}

   <input type="checkbox" id="check" class="checkbox" hidden />
      <div class="hamberger-menu">
        <label for="check" class="menu">
          <div class="menu-line menu-line-1"></div>
          <div class="menu-line menu-line-2"></div>
          <div class="menu-line menu-line-3"></div>
        </label>
      </div>

我现在该怎么办？