Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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;
  }


This, but set closer to 200 or 100 ms (and for me, swapping the translate 8 and 18 so that the switch barely moves on mouseDown, because that's damn close to a real switch's behavior). This seems like it could be a good compromise to all of the people complaining about lag and others who understand that the visual system is powerful and movement is a huge part of that. Also, it's relatively simple as far as CSS animations go!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: