---
contentHash: sha256:6358491069c7b9011a4bc254dc243d5be38175a2ed794dec748fb9ca0acd61cd
documentId: element:sk-animation
kind: element
schemaVersion: 1
skenraVersion: 0.1.0-alpha.1
---
# sk-animation

<a id="overview"></a>

## Overview

Animates an element's properties over time — the way to make a node move, scale,
rotate, or recolor, following the Web Animations model.

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.

<a id="example"></a>

## Example

```sk
<!-- 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>
```

<a id="children"></a>

## Children

Two or more <sk-keyframe> children (offset must span 0..1).

<a id="attr-id"></a>

## id

Type: `<id>` · Required: no · Animatable: no

Related: [`type:id`](types/id.md)

<a id="attr-duration"></a>

## duration

Type: `<time>` · Required: no · Animatable: no

Animation duration as a CSS `<time>` (canonical ms on the property).

Related: [`type:time`](types/time.md)

<a id="attr-delay"></a>

## delay

Type: `<time>` · Required: no · Animatable: no

Animation delay as a CSS `<time>`.

Related: [`type:time`](types/time.md)

<a id="attr-end-delay"></a>

## end-delay

Type: `<time>` · Required: no · Animatable: no

Animation end delay as a CSS `<time>` (reflected on the `end-delay` attribute).

Related: [`type:time`](types/time.md)

<a id="attr-iterations"></a>

## iterations

Type: `<iteration-count>` · Required: no · Animatable: no

Iteration count; `Infinity` reflects as the literal `"Infinity"`.

Related: [`type:iteration-count`](types/iteration-count.md)

<a id="attr-direction"></a>

## direction

Type: `<playback-direction>` · Required: no · Animatable: no

Playback direction (`normal` / `reverse` / `alternate` / `alternate-reverse`).

Related: [`type:playback-direction`](types/playback-direction.md)

<a id="attr-fill"></a>

## fill

Type: `<fill-mode>` · Required: no · Animatable: no

Fill mode (`none` / `forwards` / `backwards` / `both` / `auto`).

Related: [`type:fill-mode`](types/fill-mode.md)

<a id="attr-easing"></a>

## easing

Type: `<easing-function>` · Required: no · Animatable: no

Timing-function easing applied across each iteration.

Related: [`type:easing-function`](types/easing-function.md)

<a id="attr-composite"></a>

## composite

Type: `<composite-operation>` · Required: no · Animatable: no

Composite operation (`replace` / `add` / `accumulate`). Lives on the keyframe effect.

Related: [`type:composite-operation`](types/composite-operation.md)

<a id="attr-autoplay"></a>

## autoplay

Type: `<boolean>` · Required: no · Animatable: no · Default: `true`

Whether the animation auto-plays at install (reflect-only — it gates the

Related: [`type:boolean`](types/boolean.md)

<a id="attr-begin"></a>

## begin

Type: `<begin-value-list>` · Required: no · Animatable: no

SMIL-style begin trigger (reflect-only — wired once by the scene).

Related: [`type:begin-value-list`](types/begin-value-list.md)

<a id="attr-end"></a>

## end

Type: `<end-value-list>` · Required: no · Animatable: no

SMIL-style end trigger (reflect-only — wired once by the scene).

Related: [`type:end-value-list`](types/end-value-list.md)

<a id="event-handlers"></a>

## Event handlers

<a id="attr-onbegin"></a><a id="attr-onfinish"></a><a id="attr-onremove"></a><a id="attr-oncancel"></a>

`onbegin` — Handler for the begin event.

`onfinish` — Handler for the finish event.

`onremove` — Handler for the remove event.

`oncancel` — Handler for the cancel event.

---

Related records: [`type:begin-value-list`](types/begin-value-list.md), [`type:boolean`](types/boolean.md), [`type:composite-operation`](types/composite-operation.md), [`type:easing-function`](types/easing-function.md), [`type:end-value-list`](types/end-value-list.md), [`type:fill-mode`](types/fill-mode.md), [`type:id`](types/id.md), [`type:iteration-count`](types/iteration-count.md), [`type:playback-direction`](types/playback-direction.md), [`type:time`](types/time.md)