The keyframe effect — the target, keyframes, and timing that together make up one
animation, the unit the SkenraAnimatable family composes.
Declarative element:
<sk-keyframe-effect>
Not on the sk.* global — construct via the declarative element or a module import.
A keyframe effect bundles what is animated (a target and its keyframes) with how
long it takes (the timing). It has no element of its own: a single top-level effect
is transparent — an sk-animation directly IS the keyframe effect, with its
sk-keyframe children as the keyframes, its timing as the effect's timing, and
its host node as the target.
Key attributes. The effect's controls are the animation's timing (duration,
iterations, direction, easing, delay) plus its keyframes; the target is the
element the animation applies to. composite decides how the effect stacks with
others on the same property (replace, add, accumulate) when several animate it at
once.
Related. It is embodied by an sk-animation with sk-keyframe
children. Multiple effects compose in parallel via sk-group-effect or in
sequence via sk-sequence-effect.
This constructor follows the Web Animations API KeyframeEffect(target,
keyframes, options) signature — positional, not the Skenra
constructor(config?) convention — on purpose: <sk-keyframe-effect> is the
platform KeyframeEffect interface, and matching the spec exactly is what
lets WAAPI consumers and conformance tests use it interchangeably with a
native KeyframeEffect (including the copy-constructor overload).
constructor(targetOrSource: SkenraAnimatable | SkenraKeyframeEffect | null, keyframes?: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | SkenraKeyframeEffectOptions)| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
target |
SkenraAnimatable | null |
— | Gets the target object being animated. | SkenraKeyframeEffect |
composite |
CompositeOperation |
— | Gets the composite operation for this effect per Web Animations spec §5.3.2. | SkenraKeyframeEffect |
iterationComposite |
IterationCompositeOperation |
— | Gets the iteration composite operation per Web Animations spec §5.3.3. | SkenraKeyframeEffect |
| Method | Description | Declared by |
|---|---|---|
getKeyframes(): Keyframe[] |
Gets the keyframes for this effect per Web Animations spec §5.3.4. | SkenraKeyframeEffect |
setKeyframes(keyframes: Keyframe[] | PropertyIndexedKeyframes | null): void |
Sets the keyframes for this effect per Web Animations spec §5.3.5. | SkenraKeyframeEffect |
// Create a keyframe effect
const effect = new SkenraKeyframeEffect(target, [
{ offset: 0, x: 0 },
{ offset: 1, x: 100 }
], { duration: 1000 });
// Use with SkenraAnimation
const animation = new SkenraAnimation(effect);
animation.play();