# Why do some CSS animations jank on high refresh displays?

**URL:** <https://forum.kirupa.com/t/why-do-some-css-animations-jank-on-high-refresh-displays/679709>\
**Category:** web dev\
**Created:** [March 30, 2026, 2:00pm UTC](https://forum.kirupa.com/t/why-do-some-css-animations-jank-on-high-refresh-displays/679709 "2026-03-30T14:00:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [March 30, 2026, 2:00pm UTC](https://forum.kirupa.com/t/why-do-some-css-animations-jank-on-high-refresh-displays/679709/1 "2026-03-30T14:00:05Z")

</div>

On 120Hz and 144Hz displays, some animations still feel stuttery. What implementation mistakes usually cause this and how do you diagnose them quickly.

Yoshiii

---

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [March 30, 2026, 2:14pm UTC](https://forum.kirupa.com/t/why-do-some-css-animations-jank-on-high-refresh-displays/679709/2 "2026-03-30T14:14:07Z")

</div>

Usually it’s main-thread work, layout-triggering properties like `top/left/width`, or timing that assumes 60Hz, so I check DevTools for long frames first and move motion to `transform` and `opacity`.

```css
.card {
  will-change: transform;
  transition: transform 180ms linear;
}
.card:hover {
  transform: translateY(-4px);
}

```

Ellen 😎