5 ms·

A nice feature would be to add an "energy saver" option to your web app, which adds a class to your app and a stylesheet that disables all animations.

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
halokonrad 9y ago
There is actually a draft of media query called "reduced motion" that tells webpage that user prefers to have animation use set to minimum. It wasn't created to save energy but to help people that feel dizzy when too much of animation is going on. https://webkit.org/blog/7551/responsive-design-for-motion/#using-reduce-motion-on-the-web https://webkit.org/blog/7551/responsive-design-for-motion/#u... Other nice to have option would be to just force disable rendering all animation by browser itself.

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

halokonrad 9y ago

There is actually a draft of media query called "reduced motion" that tells webpage that user prefers to have animation use set to minimum. It wasn't created to save energy but to help people that feel dizzy when too much of animation is going on. https://webkit.org/blog/7551/responsive-design-for-motion/#using-reduce-motion-on-the-web https://webkit.org/blog/7551/responsive-design-for-motion/#u... Other nice to have option would be to just force disable rendering all animation by browser itself.