Animates an element's properties over time — the way to make a node move, scale, rotate, or recolor, following the Web Animations model.
JavaScript API:
SkenraAnimation
This is the driver of the SkenraAnimatable animation family: it owns the
timing — how long the change takes, how many times it repeats, whether it
reverses — and plays a set of keyframes that describe the property values along the
way. It is placed on the element whose properties it animates, so the same timing
grammar works for a node's transform, a material's color, a light's intensity, or
any other animatable.
Key attributes. duration is how long one cycle lasts; iterations is how many
times it repeats (Infinity loops forever); direction (alternate bounces back
and forth) and easing shape the motion; begin schedules the start, either at a
fixed time or synced to another animation's end (begin="other.end") for
sequencing. The keyframes it plays give the property values: a keyframe at offset 0
is the start, at 1 the end, and a lone keyframe at offset 1 makes a "to" animation
that interpolates from the element's own current value.
Related. Its keyframes are sk-keyframe children. Several animations on
the same element compose — run them together for a parallel effect
(sk-group-effect) or chain them with begin for a sequence
(sk-sequence-effect). A finished animation is automatically replaced when a
newer one covers the same properties, so rapid-fire animations do not accumulate.
Serve these docs to run the live example.
WebGPU needs a secure context — open this page via grunt serve
rather than double-clicking the file. The Markup tab works from disk.
<!-- Declaratively, an <sk-animation> is a child of the element it animates;
its <sk-keyframe> children carry the animated property values. Timing is
set by attributes (duration, iterations, direction, easing, …). Two
keyframes define the values at offset 0 and 1 into the animation duration -->
<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" easing="ease-in-out">
<sk-keyframe offset="0" y="-0.5"></sk-keyframe>
<sk-keyframe offset="1" y="0.5"></sk-keyframe>
</sk-animation>
</sk-sphere>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
duration |
<time> |
— | Animation duration as a CSS <time> (canonical ms on the property). |
delay |
<time> |
— | Animation delay as a CSS <time>. |
end-delay |
<time> |
— | Animation end delay as a CSS <time> (reflected on the end-delay attribute). |
iterations |
<iteration-count> (<number> | |
— | Iteration count; Infinity reflects as the literal "Infinity". |
direction |
<playback-direction> ("normal" | "reverse" | "alternate" | "alternate-reverse") |
— | Playback direction (normal / reverse / alternate / alternate-reverse). |
fill |
<fill-mode> ("none" | "forwards" | "backwards" | "both" | "auto") |
— | Fill mode (none / forwards / backwards / both / auto). |
easing |
<easing-function> |
— | Timing-function easing applied across each iteration. |
composite |
<composite-operation> ("replace" | "add" | "accumulate") |
— | Composite operation (replace / add / accumulate). Lives on the keyframe effect. |
autoplay |
<boolean> |
true |
Whether the animation auto-plays at install (reflect-only — it gates the |
begin |
<begin-value-list> |
— | SMIL-style begin trigger (reflect-only — wired once by the scene). |
end |
<end-value-list> |
— | SMIL-style end trigger (reflect-only — wired once by the scene). |
Standard DOM event-handler content attributes — the value is JavaScript run when the event fires. They behave exactly as on any HTML element.
onbegin, onfinish, onremove, oncancel
Two or more <sk-keyframe> children (offset must span 0..1).
Used in guides: Scene basics