How do I turn this button animation to off?

The animation is on right now so I would want to have it set in the off position.

https://jsfiddle.net/5cygndfh/1/


body {
  background-color: #fafcff;
  background-image: radial-gradient(circle, transparent, #afb5bf), linear-gradient(transparent, #d3d8e0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch {
  background-color: black;
  width: 150px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}
.switch input {
  display: none;
}
.switch input:checked + .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}
.switch input:checked + .button .light {
  animation: flicker 0.2s infinite 0.3s;
}
.switch input:checked + .button .shine {
  opacity: 1;
}
.switch input:checked + .button .shadow {
  opacity: 0;
}
.switch .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;
}
.switch .button::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}
.switch .button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}
.switch .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}
.switch .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;
}
.switch .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}
.switch .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}
.switch .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes light-off {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}

Once you understand how this effect is being implemented I think it will become clear what you have to do in order to start with it off by default. I’ll give you a hint. You need to understand how the CSS works, but the solution does not involve changing the CSS.

I don’t get it, I’m confused.

You’ll need to be more specific.

One thing I would recommend is that you use the browser’s dev tools inspector to view the CSS that is being applied to the “button” in its on and off states.

This is in its off state:

.switch input:checked + .button .shadow {
  opacity: 0;
}

Are you sure about that. Usually when an input is checked that usually means it is “on”. But you are on the right track, this definitely does have something to do with the state of the “button”.

It’s this one.


.switch input:checked + .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}

I still don’t understand what would need to be moved around.

What is all I am doing?

Just moving around class names to the right location?

or, is it more than that?

or none of that?

I would need to shut these off?

.switch input:checked + .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}
.switch input:checked + .button .light {
  animation: flicker 0.2s infinite 0.3s;
}
.switch input:checked + .button .shine {
  opacity: 1;
}
.switch input:checked + .button .shadow {
  opacity: 0;

}

How do you shut them off ?

I still don’t understand.

The left image I replicated using javascript.
https://jsfiddle.net/df269vnx/1/

The right one is the checkbox version.
https://jsfiddle.net/7eqL9ty8/

Everything is the same, so it should look the same visually, but they don’t when both are off.

The css checkbox version looks darker when off compared to the javascript version.

They should both look the same when off.

I guess I’m confused about what you are trying to do. I thought you wanted everything to remain the same and you just wanted the default position to be off instead of on. Perhaps you want something else? You need to be really clear about what you are trying to do. Better yet, you should just try it yourself, experiment as much as needed. Get as close as you can to what you are trying to achieve. And then if you can’t quite get it 100% you can ask here, but again, you need to be crystal clear about what you are asking.

Good luck.

1 Like

I was missing the slide on these. That fixed it.

 <div class="shine slide"></div>
    <div class="shadow slide"></div>

https://jsfiddle.net/upsx3Lvg/

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.