4 ms·

Why would 60 FPS CSS animations look bad on high refresh displays?

Wowfunhappy 3y ago
Well the CSS transition wouldn't run at 60 fps, it would run at 120 fps, no? An animation that looks slick at 120 fps might look too fast/slow/complex/whatever on a common 60 hz screen. So if I was still doing this sort of development, I'd prefer to be working on a 60 hz monitor.
- beebeepka 3y ago
  Aren't CSS animations capped at 60, same as requestAnimationFrame? I've been advocating (and using) high refresh displays for over two decades and I find your reasoning preposterous. Downgrading to crappy 60 Hz monitor for nothing.
  - Wowfunhappy 3y ago
    > Aren't CSS animations capped at 60, same as requestAnimationFrame? Did some quick Googling to make sure I wasn't just out of the loop on this, as far as I can tell they are not the same: https://github.com/whatwg/html/issues/5025 https://github.com/whatwg/html/issues/5025
    - beebeepka 3y ago
      Can you point me to the part confirming your claim? If anything, it's confirming mine that they both are stuck at 60 Hz.
      - Wowfunhappy 3y ago
        The link says: > As such, on their 120hz devices, requestAnimationFrame is throttled to 60hz, whereas CSS animations run at 120hz. Please let me know if I am misunderstanding, it has been a few years since I've done this type of work.
        beebeepka 3y ago
        I just tested this and you are right. Thanks
  - fulafel 3y ago
    CSS transitions and animations seem to be declared using expressions that are continuous over time so it would make sense that they are just quantized down to whatever refresh rate the system supports.
  - mmis1000 3y ago
    I am pretty sure they are synchronized to refresh rate (at least on windows). I made a small experiment about raf https://codepen.io/mmis1000/pen/qBxqgLr https://codepen.io/mmis1000/pen/qBxqgLr and it always looks uniform regardless I am on a 60, 120, 160 fps screen. (It would blink crazily if you put it in the middle of two screen with different refresh rate, because it can't be in two refresh rate at same time) Erit: okay, it looks non uniform only in safari. Clap, clap, clap, Apple…
- c-hendricks 3y ago
  I'm not even sure CSS animations can go above 60fps, and am unsure why you'd think it would be faster / slower on a different refresh rate screen: CSS transitions are defined by time, not frames.
  - Wowfunhappy 3y ago
    Sorry, I meant the animation might look too fast, psychologically. The frame rate changes how we perceive movement.

Well the CSS transition wouldn't run at 60 fps, it would run at 120 fps, no? An animation that looks slick at 120 fps might look too fast/slow/complex/whatever on a common 60 hz screen. So if I was still doing this sort of development, I'd prefer to be working on a 60 hz monitor.

beebeepka 3y ago
Aren't CSS animations capped at 60, same as requestAnimationFrame? I've been advocating (and using) high refresh displays for over two decades and I find your reasoning preposterous. Downgrading to crappy 60 Hz monitor for nothing.
- Wowfunhappy 3y ago
  > Aren't CSS animations capped at 60, same as requestAnimationFrame? Did some quick Googling to make sure I wasn't just out of the loop on this, as far as I can tell they are not the same: https://github.com/whatwg/html/issues/5025 https://github.com/whatwg/html/issues/5025
  - beebeepka 3y ago
    Can you point me to the part confirming your claim? If anything, it's confirming mine that they both are stuck at 60 Hz.
    - Wowfunhappy 3y ago
      The link says: > As such, on their 120hz devices, requestAnimationFrame is throttled to 60hz, whereas CSS animations run at 120hz. Please let me know if I am misunderstanding, it has been a few years since I've done this type of work.
      - beebeepka 3y ago
        I just tested this and you are right. Thanks
- fulafel 3y ago
  CSS transitions and animations seem to be declared using expressions that are continuous over time so it would make sense that they are just quantized down to whatever refresh rate the system supports.
- mmis1000 3y ago
  I am pretty sure they are synchronized to refresh rate (at least on windows). I made a small experiment about raf https://codepen.io/mmis1000/pen/qBxqgLr https://codepen.io/mmis1000/pen/qBxqgLr and it always looks uniform regardless I am on a 60, 120, 160 fps screen. (It would blink crazily if you put it in the middle of two screen with different refresh rate, because it can't be in two refresh rate at same time) Erit: okay, it looks non uniform only in safari. Clap, clap, clap, Apple…
c-hendricks 3y ago
I'm not even sure CSS animations can go above 60fps, and am unsure why you'd think it would be faster / slower on a different refresh rate screen: CSS transitions are defined by time, not frames.
- Wowfunhappy 3y ago
  Sorry, I meant the animation might look too fast, psychologically. The frame rate changes how we perceive movement.