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.
*, *::before, *::after
{
transition: none !important;
animation: none !important;
}
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 :]
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;
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
Other nice to have option would be to just force disable rendering all animation by browser itself.