<sk-keyframe-effect>

The keyframe effect — the target, keyframes, and timing that together make up one animation, the unit the SkenraAnimatable family composes.

JavaScript API: SkenraKeyframeEffect

Remarks

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.

<!-- A keyframe effect is the target + keyframes + timing of an animation.
     Declaratively it IS the <sk-animation> element: its <sk-keyframe>
     children are the keyframes, its attributes are the timing, and its host
     element is the target. -->
<sk-scene>
    <sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>

    <sk-sphere radius="1" segments="6">
        <sk-surface-paint material="#mat"></sk-surface-paint>
        <sk-animation duration="1000ms" iterations="Infinity" direction="alternate">
            <sk-keyframe offset="0" x="0"></sk-keyframe>
            <sk-keyframe offset="1" x="2"></sk-keyframe>
        </sk-animation>
    </sk-sphere>
</sk-scene>

Attributes

↑ Documentation home · ← All elements