60 FPS Animations with CSS3

Re:60 FPS Animations with CSS3 by michaelchisari on Monday July 10, 2017 @05:19PM (#14739790)

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.

[ Parent | on HN ]

Re:60 FPS Animations with CSS3 by myfonj on Monday July 10, 2017 @08:30PM (#14740748)

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

[ Parent | on HN ]

Re:60 FPS Animations with CSS3 by uwu on Tuesday July 11, 2017 @07:47AM (#14743319)

`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

[ Parent | on HN ]

Re:60 FPS Animations with CSS3 by myfonj on Monday July 17, 2017 @04:57AM (#14786721)

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

[ Parent | on HN ]

Re:60 FPS Animations with CSS3 by halokonrad on Monday July 10, 2017 @07:08PM (#14740411)

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/#u...

Other nice to have option would be to just force disable rendering all animation by browser itself.

[ Parent | on HN ]