4 ms·
https://jsfiddle.net/u1vybhqg/ https://jsfiddle.net/u1vybhqg/ input:checked + .slider:active:before { transform: translateX(8px); transition: 1s; }
by aimor 3y ago
https://jsfiddle.net/u1vybhqg/ 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;
}
- PennRobotics 3y agoThis, 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!