Function: Keyframes()

function Keyframes(name: string): <This, Value>(target: (this: This) => Value, context: ClassGetterDecoratorContext<This, Value>) => (this: This) => Value;

Defined in: src/styles/decorators/keyframes.ts:380

Parameters

Parameter	Type	Description
`name`	`string`	The animation name to use in CSS (e.g., ‘spin’, ‘fadeIn’) Usage: `class MyStyles extends BaseStyleSheet { @State rotationEnd = 360; @Keyframes('spin') get spinAnimation() { return { '0%': { transform: 'rotate(0deg)' }, '100%': { transform:` rotate(${this.rotationEnd}deg) `}, // Reactive! }; } @Rule('.spinner') get spinnerStyles() { return { animation: 'spin 1s linear infinite', }; } }`

Returns

<This, Value>(target: (this: This) => Value, context: ClassGetterDecoratorContext<This, Value>): (this: This) => Value;

Type Parameters

Type Parameter
`This` extends `object`
`Value` extends `KeyframesDefinition` \| `undefined`

Parameters

Parameter	Type
`target`	(`this`: `This`) => `Value`
`context`	`ClassGetterDecoratorContext`<`This`, `Value`>

Returns

(this: This): Value;

Parameters

Parameter	Type
`this`	`This`

Returns

Value

Keyframes

Decorator - Type-safe reactive CSS keyframe animations

Creates a

Keyframes

CSS rule that can be referenced by animation properties. Supports reactive values - keyframes will update when signals change.

Examples

@Keyframes('bounce')
get bounceAnimation() {
  return {
    '0%': { transform: 'translateY(0)' },
    '50%': { transform: 'translateY(-20px)' },
    '100%': { transform: 'translateY(0)' },
  };
}

@Keyframes('fadeIn')
get fadeInAnimation() {
  return {
    'from': { opacity: 0 },
    'to': { opacity: 1 },
  };
}