CSS exponential smoothing

• https://lisyarus.github.io/blog/posts/exponential-smoothing.html
• https://news.ycombinator.com/item?id=39637487

You only need to smooth on approach. Something like transition: left 200ms ease-out in CSS should have you covered most of the time. Alternatively, you can build any kind of interpolation by replacing the ease-out function with the cubic-bezier(...steps) keyword: https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function

Example 🔗

https://jsfiddle.net/u1vybhqg/

input:checked + .slider:active:before {
  transform: translateX(8px);
  transition: 1s;
}

input:not(:checked) + .slider:active:before {
  transform: translateX(18px);
  transition: 1s;
}