URL: https://brookeafk.com/animation

Browser/Version: Firefox 126.0b6 (64-bit)

Operating System: Windows 11

What seems to be the trouble?(Required)

• Desktop site instead of mobile site
• Mobile site is not usable
• Video doesn't play
• Layout is messed up
• Text is not visible
• Something else (Add details below)
  CSS animation doesn't play

Steps to Reproduce

1. Navigate to: https://brookeafk.com/animation
2. Press and hold the Shift key for three seconds until the square has stopped moving (right side of the page)
3. Release the Shift key to make the square start to move to the left
4. Press and hold the Shift key before the square stops moving (0–2 seconds after releasing)

Expected Behavior:
On browsers like Chrome and Opera, after completing step 3, the square will smoothly glide to the right

Actual Behavior:
On Firefox, after completing step 3, the square will instantly snap to the right

Video
As it's difficult to describe the behaviour in a screenshot, I've attached a link to a video of the issue here: https://www.youtube.com/watch?v=4TPh15bj0yk