Transition on SVG path appears to not be working properly

[rhoot]

Describe the bug

Transitions on SVG <path> elements appears to not be working properly. Not sure if it's got something to do with the path itself.

• Fade transitions pop in all at once after the full duration, but fade out.
• Slide transitions pop in all at once, and fade out.
• Draw transition pops in immediately, and pops out after the full duration.

Edit: To add, the fade in works once. Then it stops working.

Edit 2: I installed Chromium to compare (I was using Firefox). The fade in/out works there, but the others have the same problem still. Firefox 124.0 is where I see the fade-in only work once.

Reproduction

1. Paste this into the REPL: https://gist.github.com/rhoot/207cb56fc898ae7134beadbd023accff
2. Try checking/unchecking the checkboxes.

Logs

No response

System Info

System:
    OS: Linux 6.8 EndeavourOS
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 13.82 GB / 31.27 GB
    Container: Yes
    Shell: 5.2.26 - /bin/bash
  Binaries:
    Node: 21.7.0 - /usr/bin/node
    npm: 10.5.0 - /usr/bin/npm

Severity

annoyance