3 ms·

In user styles capable browsers you can disable CSS3 animations pretty easily, just using , ::before, *::after { transition: none !important;

by myfonj 9y ago

In user styles capable browsers you can disable CSS3 animations pretty easily, just using *, *::before, *::after { transition: none !important; animation: none !important; } (For not-so-capable browsers using author level pseudo-user-style sheets the `star` must have raised specificity, like `:not(#\0)`.) I used this in the past when I wanted to play 2048 as fast as possible, resetting also border-radius, text-shadow, box-shadow, text-rendering, image-rendering and background-image [1]. It really made quite a difference :] [1] https://userstyles.org/styles/103878/nofx https://userstyles.org/styles/103878/nofx

uwu 9y ago
`transition: none` breaks pages relying on the "transitionend" js event (edit: and i guess the other transition-related events i forgot about), i noticed logging into google wouldn't work with it (it wouldn't hide some gray overlay) here's what i use instead: /* forgot if this was needed but i think using !important here broke something */ transition-property: none; /* maybe not needed */ transition-delay: 0!important; /* non-zero to support "transitionend" event */ transition-duration: 0.0000001s!important; /* possible tiny optimization */ transition-timing-function: linear!important; i don't know if `animation` has events associated with it but i haven't came across any sites breaking without them
- myfonj 9y ago
  This is insightful remark; I guessed it could break some presumably crappy designs blindly relying on transition-state or such, but … Google? Wow. Even considering their approach to user level style sheets [1] it is mildly surprising. Side note: perhaps using `..duration: ..ms` in and `transition-timing-function: step-start;` could make some additional micro optimisation. [1] killed it: https://bugs.chromium.org/p/chromium/issues/detail?id=347016 https://bugs.chromium.org/p/chromium/issues/detail?id=347016

In user styles capable browsers you can disable CSS3 animations pretty easily, just using *, *::before, *::after { transition: none !important;

by myfonj 9y ago

uwu 9y ago

`transition: none` breaks pages relying on the "transitionend" js event (edit: and i guess the other transition-related events i forgot about), i noticed logging into google wouldn't work with it (it wouldn't hide some gray overlay) here's what i use instead: /* forgot if this was needed but i think using !important here broke something */ transition-property: none; /* maybe not needed */ transition-delay: 0!important; /* non-zero to support "transitionend" event */ transition-duration: 0.0000001s!important; /* possible tiny optimization */ transition-timing-function: linear!important; i don't know if `animation` has events associated with it but i haven't came across any sites breaking without them

myfonj 9y ago
This is insightful remark; I guessed it could break some presumably crappy designs blindly relying on transition-state or such, but … Google? Wow. Even considering their approach to user level style sheets [1] it is mildly surprising. Side note: perhaps using `..duration: ..ms` in and `transition-timing-function: step-start;` could make some additional micro optimisation. [1] killed it: https://bugs.chromium.org/p/chromium/issues/detail?id=347016 https://bugs.chromium.org/p/chromium/issues/detail?id=347016