Hacker News Reader

Comment by myfonj | Hacker News Reader

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

View on HN

`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

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

Reply on news.ycombinator.com