How do I remove hover transform animation if checkbox is checked using CSS only-CodePudding

How do I remove the

        transform-origin: right;
        transform: scaleX(0.5);
    }
    .menu-btn:hover > span:nth-of-type(3){
        transform-origin: left;
        transform: scaleX(0.5);
    }

when the "menu-check" input checkbox is checked since they interfere with transform animations that occur when checked.

Thank you in advance.

.menu-btn {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 5px;
  bottom: 20px;
  right: 20px;
  padding: 15px;
  border-radius: 20px;
  z-index: 10;
  background-color: #08ccc9;
  cursor: pointer;
}

.menu-btn:hover > span:nth-of-type(1) {
  transform-origin: right;
  transform: scaleX(0.5);
}

.menu-btn:hover > span:nth-of-type(3) {
  transform-origin: left;
  transform: scaleX(0.5);
}

.menu-btn input {
  display: none;
}

.menu-btn span {
  width: 25px;
  height: 4px;
  border-radius: 999px;
  background-color: black;
  transition: all 0.3s ease;
}

.menu-btn input:checked ~ span:nth-of-type(1) {
  transform: rotate(45deg) translate(5px, 7px);
}

.menu-btn input:checked ~ span:nth-of-type(2) {
  transform: translate(30px, 0px);
  opacity: 0;
}

.menu-btn input:checked ~ span:nth-of-type(3) {
  transform: rotate(-45deg) translate(5px, -7px);
}

<label for="menu-check" >
                <input type="checkbox" id="menu-check">
                <span></span>
                <span></span>
                <span></span>
            </label>

CodePudding user response：

Reset the transform-origin to center on checked and also remove transition from it

.menu-btn {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 5px;
  bottom: 20px;
  right: 20px;
  padding: 15px;
  border-radius: 20px;
  z-index: 10;
  background-color: #08ccc9;
  cursor: pointer;
}

.menu-btn:hover > span:nth-of-type(1) {
  transform-origin: right;
  transform: scaleX(0.5);
}

.menu-btn:hover > span:nth-of-type(3) {
  transform-origin: left;
  transform: scaleX(0.5);
}

.menu-btn input {
  display: none;
}

.menu-btn span {
  width: 25px;
  height: 4px;
  border-radius: 999px;
  background-color: black;
  transition: all 0.3s ease;
}

.menu-btn input:checked ~ span:nth-of-type(1) {
  transform: rotate(45deg) translate(6px, 7px);
  /* added */
  transform-origin: center;
  transition: all 0.3s ease,transform-origin 0s;
}

.menu-btn input:checked ~ span:nth-of-type(2) {
  transform: translate(30px, 0px);
  opacity: 0;
}

.menu-btn input:checked ~ span:nth-of-type(3) {
  transform: rotate(-45deg) translate(5px, -7px);
  /* added */
  transform-origin: center;
  transition: all 0.3s ease,transform-origin 0s;
}

<label for="menu-check" >
 <input type="checkbox" id="menu-check">
 <span></span>
 <span></span>
 <span></span>
</label>

CodePudding user response：

You can use the input:not(:checked) selector. I'm not sure this is the end result youre going for but here it is applied to your snippet.

.menu-btn {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 5px;
  bottom: 20px;
  right: 20px;
  padding: 15px;
  border-radius: 20px;
  z-index: 10;
  background-color: #08ccc9;
  cursor: pointer;
}

.menu-btn:hover input:not(:checked) ~ span:nth-of-type(1) {
  transform-origin: right;
  transform: scaleX(0.5);
}

.menu-btn:hover input:not(:checked) ~ span:nth-of-type(3) {
  transform-origin: left;
  transform: scaleX(0.5);
}

.menu-btn input {
  display: none;
}

.menu-btn span {
  width: 25px;
  height: 4px;
  border-radius: 999px;
  background-color: black;
  transition: all 0.3s ease;
}

.menu-btn input:checked ~ span:nth-of-type(1) {
  transform: rotate(45deg) translate(5px, 7px);
}

.menu-btn input:checked ~ span:nth-of-type(2) {
  transform: translate(30px, 0px);
  opacity: 0;
}

.menu-btn input:checked ~ span:nth-of-type(3) {
  transform: rotate(-45deg) translate(5px, -7px);
}

<label for="menu-check" >
                <input type="checkbox" id="menu-check">
                <span></span>
                <span></span>
                <span></span>
            </label>