Why is this CSS + HTML Toggle button blinking?

user_16550418 0
Viewed 73

It was supposed to transition smoothly

  • to colorful when hover or active
  • to gray when deactivated and no hover

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0%;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 17px;
  background-color: gray;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input + .slider:hover,
input:checked + .slider {
  background: linear-gradient(
    to top right,
    yellow,
    orange
  );
}

input:checked + .slider::before {
  -webkit-transform: translateX(26px);
  transform: translateX(26px);
}
    <label class="switch">
      <input type="checkbox" />
      <span class="slider"></span>
    </label>

But it blinks in between some of these transitions - hover exit, deactivation click - and does not transition smoothly when hovered on. I got a feeling it has to do with something overlapping, but do not quite understand why. Any help?

Thanks in advance!

css html
2 Answers

First thing I see, is you use of -webkit-transition. This has been deprecated and no longer needed: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transition

The main issue is that you're expecting to be able to transition linear-gradient which is not possible out of the box with CSS. So you are overwriting background-color with background on hover which is happening with no transition. Then when hover is done, it immediately removes the linear gradient and transitions in the the gray color. That is why it is blinking.

You will need to remove the transition property altogether to get rid of the blink, or just scope it to the transform property you are also transitioning. If you really want the transition, check out this article on CSS Tricks to make a workaround

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0%;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 17px;
  background: gray;
}

.slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background: white;
  border-radius: 50%;
  transition: transform 400ms ease;
}

input:hover + .slider,
input:checked + .slider {
  background: linear-gradient(
    to top right,
    yellow,
    orange
  );
}

input:checked + .slider::before {
  -webkit-transform: translateX(26px);
  transform: translateX(26px);
}
    <label class="switch">
      <input type="checkbox" />
      <span class="slider"></span>
    </label>

user_132223590 
-webkit-transition: 0.4s;
transition: 0.4s;

Under the .slider CSS seems to be causing the problem. Removing it doesn't seem to change anything else but I am not entirely sure if that solves your problem or not. It sounds like you want it to fade in when hovered over and then probably back out when not being hovered over so long as it is not activated.

user_8609340
Related