Animated Toggle | Learning Axis

HTML

CSS

* {
  box-sizing: border-box;
  transition: all 0.5s ease 0s;
}
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #323232;
}
.toggle {
  position: relative;
  width: 40vmin;
  height: 20vmin;
  display: flex;
  align-items: center;
  justify-content: center;
}
input {
  opacity: 0;
  visibility: hidden;
}
label[for=btn] {
  position: absolute;
  width: 40vmin;
  height: 20vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
label[for=btn]:before {
  content: "";
  position: absolute;
  width: 30vmin;
  height: 2.5vmin;
  background: #474747;
  border-radius: 10vmin;
}
.thumb {
  position: absolute;
  width: 17.5vmin;
  height: 17.5vmin;
  top: 1vmin;
  left: 0.5vmin;
  border-radius: 10vmin;
  background: #848484;
  cursor: pointer;
  border: 2.5vmin solid #323232;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  animation: start-thumb 1.5s ease 0s 1;
}
.thumb:before {
  content: "";
  position: absolute;
  width: 65%;
  height: 65%;
  background: #323232;
  border-radius: 10vmin;
  animation: start-thumb-before 1.5s ease 0s 1;
}
#btn:checked + label .thumb {
  left: calc(100% - 20.75vmin);
  background: #ffffff;
}
#btn:checked + label .thumb:before {
  width: 0%;
  height: 0%;
}
@keyframes start-thumb {
  0%, 50% { left: calc(100% - 20.75vmin); background: #ffffff; }
  100% { left: 0.5vmin; }
}
@keyframes start-thumb-before {
  0%, 50% { width: 0%; height: 0%; }
  100% { width: 65%; height: 65%; }
}