`lib.dom.d.ts`: Keyframe interface should allow CSS Typed Object Model objects like CSSTransformValue, etc

🔎 Search Terms

"Keyframe transform CSSRotate", "lib.dom.d.ts Keyframe Typed OM", "CSSTransformValue in Web Animations"

🕗 Version & Regression Information

Typescript version: 6.0.2

It's not a regression but a long-standing missing type definition

⏯ Playground Link

https://www.typescriptlang.org/play/?#code/MYewdgzgLgBA1gUwJ4DMBOBDAtgiAuGAaWXWwQG0BdGAXhnICgZmYBvGKTSFENLAgORoQUDFAQAKAAwATBAHMAlAIC+AGiYt2nDN178YYBAHcYAYQDKFgEoixkgCwBWNTCmv35qwDkArjjQAS2AANQwAG18EADoABww0CEkBAE5ZBQFFRRUGSgYGUEhYBHCEHDBYOhkQYH8ECujgNAR7AFFS8qgJARlAgDdM-JKy+qho3UCsewlGFjYOLggePkFhUXFpOSVVDTntReWDI1NLGzsN5w8rrws-AOCwyJj4xOS0rczs3NdWTWYZXyYKCBcAEJxSKQMFSKIA

💻 Code

const keyframes: Keyframe[] = [
    { transform: 'rotate(0deg)'},
    { transform: new CSSRotate(45, 0, 0, CSSNumericValue.parse('90deg'))}
]

const element = document.createElement('div')

element.animate([
    { transform: 'rotate(0deg)'},
    { transform: new CSSRotate(45, 0, 0, CSSNumericValue.parse('90deg'))}
], {
    duration: 500
})

🙁 Actual behavior

TypeScript identifies the property as an invalid type because it only expects strings or numbers for CSS property values in the Keyframe record.

🙂 Expected behavior

The Keyframe interface should be updated to allow CSSTransformValue (and other Typed OM types) for relevant CSS properties, as these are valid at runtime in modern browsers.

Additional information about the issue

The Keyframe interface used by element.animate() currently only accepts string | number | null | undefined for CSS properties. However, the Web Animations API is compatible with the CSS Typed OM, allowing properties like transform to accept CSSTransformValue objects such as CSSRotate, CSSTranslate, etc.