Skip to content

lint: flag CSS transition (seek-unsafe; adapter only covers @keyframes) #3493

Description

@valeriangalliat

Problem

CSS transition runs on the browser clock. A GSAP class/attr swap looks correct in preview and --workers 1. Parallel chunk workers (and snapshot --at past the settle time) restore the class on a fresh page, so the browser restarts the fade and the export flashes.

Motion skills already ban it. The CSS adapter only discovers animation-name — finite @keyframes are seekable; transition is not. hyperframes check does not flag it. Agents and web-CSS habits keep producing it.

Proposed solution

A lint error (so check fails, same family as non_deterministic_code / gsap_infinite_repeat):

  • Flag transition / transition-* (and -webkit-) in <style> and inline style="".
  • Allow transition: none / transition-property: none.
  • Ignore custom properties (--transition-speed).
  • Fix hint: keep the class swap for state; put the visual change on the paused GSAP timeline.

The frame-worker self-check already uses the label css_transition_used — reuse that code name if you add the rule.

Alternatives considered

finish() jump-spawned CSS transitions in the renderer. That papers over illegal motion and still leaves agents producing it.

Additional context

Fixture: https://github.com/ArcadeHQ/hyperframes-repros/tree/patch/jump-seek-css-settle

(check is clean; --workers 4 and snapshot --at 2 replay the 0.5s fade.)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions