---
contentHash: sha256:b7960bd76066c5da651f6b77385f9023abb6a64ea74636754f55907b76477a36
documentId: guide:for-agents-example-keyframes-easing
kind: guide
schemaVersion: 1
skenraVersion: 0.1.0-alpha.1
---
# Keyframes and easing

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

## Overview

Keyframe animation with per-keyframe easing: each keyframe's easing governs the segment STARTING at that keyframe (ease-out rising, ease-in falling), next to a linear full-turn rotation. Durations carry CSS time units; angles carry CSS angle units.

Demonstrates: multi-keyframe animation, per-keyframe easing, infinite iterations.

<a id="scene"></a>

## Scene

```sk
<sk-scene style="width: 100%; height: 420px;">
    <sk-camera-orbit-control fit-targets="auto" fit-margin="0.2"
        azimuth="28deg" elevation="18deg" orient-toward-pivot></sk-camera-orbit-control>
    <sk-perspective-camera focal-length="28"></sk-perspective-camera>
    <sk-directional-light intensity="1" p="70deg" h="30deg"></sk-directional-light>

    <sk-plain-material id="ground-mat" base-color="#3a3a3a"></sk-plain-material>
    <sk-plain-material id="warm-mat" base-color="#d8a24a"></sk-plain-material>
    <sk-plain-material id="cool-mat" base-color="#7fa8d8"></sk-plain-material>
    <sk-plain-material id="line-mat" base-color="#1c1c1c"></sk-plain-material>

    <sk-plane y="-1.2" width="12" height="12" orientation="+y" cull-mode="none">
        <sk-surface-paint material="#ground-mat"></sk-surface-paint>
    </sk-plane>

    <!-- Per-keyframe easing governs the segment STARTING at that keyframe:
         ease-out on the way up, ease-in on the way down. -->
    <sk-sphere x="-1.8" radius="0.9">
        <sk-surface-paint material="#warm-mat"></sk-surface-paint>
        <sk-animation duration="2400ms" iterations="Infinity">
            <sk-keyframe offset="0" y="0" easing="ease-out"></sk-keyframe>
            <sk-keyframe offset="0.5" y="2.2" easing="ease-in"></sk-keyframe>
            <sk-keyframe offset="1" y="0"></sk-keyframe>
        </sk-animation>
    </sk-sphere>

    <sk-cube x="1.8" size="1.5">
        <sk-surface-paint material="#cool-mat"></sk-surface-paint>
        <sk-edge-paint material="#line-mat"></sk-edge-paint>
        <sk-animation duration="6000ms" iterations="Infinity" easing="linear">
            <sk-keyframe offset="0" h="0deg"></sk-keyframe>
            <sk-keyframe offset="1" h="360deg"></sk-keyframe>
        </sk-animation>
    </sk-cube>
</sk-scene>
```

---

Related records: [`element:sk-animation`](elements/sk-animation.md), [`element:sk-camera-orbit-control`](elements/sk-camera-orbit-control.md), [`element:sk-cube`](elements/sk-cube.md), [`element:sk-directional-light`](elements/sk-directional-light.md), [`element:sk-edge-paint`](elements/sk-edge-paint.md), [`element:sk-keyframe`](elements/sk-keyframe.md), [`element:sk-perspective-camera`](elements/sk-perspective-camera.md), [`element:sk-plain-material`](elements/sk-plain-material.md), [`element:sk-plane`](elements/sk-plane.md), [`element:sk-scene`](elements/sk-scene.md), [`element:sk-sphere`](elements/sk-sphere.md), [`element:sk-surface-paint`](elements/sk-surface-paint.md), [`guide:for-agents`](guides/for-agents.md)