fix: add CSSStyleValue to Keyframe index signatures

[Ankitajainkuniya]

Summary

• Adds CSSStyleValue to the Keyframe and PropertyIndexedKeyframes index signatures
• Enables passing CSS Typed Object Model values directly to element.animate(), KeyframeEffect(), and setKeyframes()

Problem

The Web Animations API supports passing CSS Typed OM values (e.g., CSSUnitValue, CSSKeywordValue, CSSTransformValue) to animation keyframes. This is valid at runtime:

element.animate([
  { transform: new CSSTranslate(CSS.px(0), CSS.px(0)) },
  { transform: new CSSTranslate(CSS.px(100), CSS.px(100)) }
], { duration: 500 });

However, the current Keyframe interface only accepts string | number | null | undefined in its index signature, causing a TypeScript error for this valid usage.

Changes

inputfiles/overridingTypes.jsonc:

• Keyframe: [property: string]: string | number | CSSStyleValue | null | undefined
• PropertyIndexedKeyframes: [property: string]: string | string[] | number | CSSStyleValue | CSSStyleValue[] | null | (number | null)[] | undefined

ComputedKeyframe is intentionally left unchanged — getKeyframes() returns computed string values, not CSSStyleValue objects.

Motivation

• The KeyframeAnimationOptions interface already uses CSSNumericValue | CSSKeywordValue for rangeStart/rangeEnd, showing these types are recognized for animations
• CSS Typed OM Level 1 is widely supported in modern browsers
• MDN documents CSSStyleValue as valid for keyframe properties

Fixes microsoft/TypeScript#63325

[github-actions]

Thanks for the PR!

This section of the codebase is owned by @saschanaz - if they write a comment saying "LGTM" then it will be merged.

[Ankitajainkuniya]

@microsoft-github-policy-service agree