One waypoint of an animation — the property values the animated element should have at a single moment in the timeline.
JavaScript API:
SkenraKeyframe
A keyframe belongs to the SkenraAnimatable animation family as a child of an
sk-animation: the animation interpolates between its keyframes to drive the
host's properties. Each keyframe pins one instant of the timeline.
Key attributes. offset places the keyframe in the timeline as a fraction from
0 (start) to 1 (end). Every other attribute is a value for one animatable property
of the animation's host at that offset — and that set is open: a keyframe can carry
any animatable property (x, base-color, quaternion, …), which is why it has no
fixed list of named properties. The host determines what is animatable — node
transforms on a node, colors on a material.
Related. Keyframes live inside an sk-animation; a lone keyframe at
offset="1" makes a "to" animation from the host's current value. The properties a
keyframe may set are the animatable properties of whatever SkenraAnimatablehosts the animation.
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.
<!-- A <sk-keyframe> is one keyframe of a parent <sk-animation>. Its `offset`
sets the time fraction (0–1); every OTHER attribute is an animated
property value of the animation's host at that offset. The animation
lives on the element whose properties it animates — node transforms on
the node, material colors on the material. -->
<sk-scene>
<!-- Color keyframes on the material -->
<sk-plain-material id="mat" base-color="#ff0000">
<sk-animation duration="2000ms" iterations="Infinity" direction="alternate">
<sk-keyframe offset="0" base-color="#ff0000"></sk-keyframe>
<sk-keyframe offset="1" base-color="#0066ff"></sk-keyframe>
</sk-animation>
</sk-plain-material>
<!-- Position keyframes on the node -->
<sk-sphere radius="1" segments="6">
<sk-surface-paint material="#mat"></sk-surface-paint>
<sk-animation duration="2000ms" iterations="Infinity" direction="alternate">
<sk-keyframe offset="0" x="-2"></sk-keyframe>
<sk-keyframe offset="1" x="2"></sk-keyframe>
</sk-animation>
</sk-sphere>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
offset |
<number> |
— | attribute only |
easing |
<easing-function> |
— | attribute only |
composite |
<composite-operation> ("replace" | "add" | "accumulate") |
— | attribute only |
h |
<angle> |
0 |
attribute only |
p |
<angle> |
0 |
attribute only |
b |
<angle> |
0 |
attribute only |
azimuth |
<angle> |
— | attribute only |
elevation |
<angle> |
— | attribute only |
wind-direction |
<angle> |
— | attribute only |
x |
<number> |
— | attribute only |
y |
<number> |
— | attribute only |
z |
<number> |
— | attribute only |
w |
<number> |
— | attribute only |
sx |
<number> |
— | attribute only |
sy |
<number> |
— | attribute only |
sz |
<number> |
— | attribute only |
radius |
<number> |
— | attribute only |
progress |
<number> |
— | attribute only |
intensity |
<number> |
— | attribute only |
base-color |
<color> |
— | attribute only |
base-color-darken-factor |
<number> |
— | attribute only |
color |
<color> |
— | attribute only |
stop-offset |
<number> |
— | attribute only |
stop-color |
<color> |
— | attribute only |
interpolation |
<stop-interpolation> ("step" | "linear" | "smooth") |
— | attribute only |
wind-speed |
<number> |
— | attribute only |
vertical-amplitude |
<number> |
— | attribute only |
horizontal-amplitude |
<number> |
— | attribute only |
anchor |
<field-anchor> ("center-line" | "edge") |
— | attribute only |
angle |
<angle> |
— | attribute only |
axis |
<orientation-axis> ("+x" | "-x" | "+y" | "-y" | "+z" | "-z") |
— | attribute only |
backdrop-blend-mode |
<backdrop-blend-mode> ("normal" | "multiply" | "screen" | "plus-lighter") |
— | attribute only |
base-color-source |
<id-ref> |
— | reference by id |
base-color-source-blend-mode |
<blend-mode> ("normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" | "plus-lighter") |
— | attribute only |
blend-sharpness |
<number> |
— | attribute only |
bottom-radius |
<number> |
— | attribute only |
cap-field-mode |
<cap-field-mode> ("none" | "match") |
— | attribute only |
cap-progress-mode |
<cap-progress-mode> ("body-only" | "inclusive") |
— | attribute only |
cast-shadow |
<boolean> |
— | attribute only |
cell-size |
<number> |
— | attribute only |
clamp |
<boolean> |
— | attribute only |
cloner |
<id-ref> |
— | reference by id |
clone-scale |
<number> |
— | attribute only |
compute-node |
<id-ref> |
— | reference by id |
contrast |
<number> |
— | attribute only |
cull-mode |
<cull-mode> ("front" | "back" | "none") |
— | attribute only |
db |
<angle> |
— | attribute only |
dh |
<angle> |
— | attribute only |
distance |
<number> |
— | attribute only |
distribution |
<spline-distribution> ("control-points" | "tessellated" | "arc-length-spaced") |
— | attribute only |
dot-spacing |
<number> |
— | attribute only |
dp |
<angle> |
— | attribute only |
d-quaternion |
<quaternion> ({ <number>, <number>, <number>, <number> }) |
— | attribute only |
dsx |
<number> |
— | attribute only |
dsy |
<number> |
— | attribute only |
dsz |
<number> |
— | attribute only |
dx |
<number> |
— | attribute only |
dy |
<number> |
— | attribute only |
dz |
<number> |
— | attribute only |
extent |
<number> |
— | attribute only |
far |
<number> |
— | attribute only |
field |
<id-ref> |
— | reference by id |
field-weight-range |
<field-weight-range> ([<number>, <number>]) |
— | attribute only |
fine |
<number> |
— | attribute only |
focal-length |
<number> |
— | attribute only |
frequency |
<number> |
— | attribute only |
head-length |
<number> |
— | attribute only |
head-pos |
<3d-position> ([<number>, <number>, <number>]) |
— | attribute only |
head-radius |
<number> |
— | attribute only |
height |
<number> |
— | attribute only |
hemisphere |
<boolean> |
— | attribute only |
high-color |
<color> |
— | attribute only |
highlight-dot-density |
<number> |
— | attribute only |
illumination-max-scale |
<number> |
— | attribute only |
illumination-min-scale |
<number> |
— | attribute only |
inner-radius |
<number> |
— | attribute only |
inner-size |
<number> |
— | attribute only |
intensity-field |
<id-ref> |
— | reference by id |
is-closed |
<boolean> |
— | attribute only |
jitter |
<number> |
— | attribute only |
levels |
<number> |
— | attribute only |
line-cap |
<stroke-line-cap> ("butt" | "round" | "square") |
— | attribute only |
line-join |
<stroke-line-join> ("miter" | "round" | "bevel") |
— | attribute only |
low-color |
<color> |
— | attribute only |
major-radius |
<number> |
— | attribute only |
material |
<id-ref> |
— | reference by id |
max-dot |
<number> |
— | attribute only |
mesh |
<id-ref> |
— | reference by id |
min-dot |
<number> |
— | attribute only |
minor-radius |
<number> |
— | attribute only |
mode |
<viewport-position-mode> ("px" | "percent" | "anchor") |
— | attribute only |
morph-progress |
<number> |
— | attribute only |
mottle |
<number> |
— | attribute only |
mottle-scale |
<number> |
— | attribute only |
near |
<number> |
— | attribute only |
on-fraction |
— |
— | attribute only |
orientation |
<orientation-axis> ("+x" | "-x" | "+y" | "-y" | "+z" | "-z") |
— | attribute only |
origin |
<id-ref> |
— | reference by id |
outer-radius |
<number> |
— | attribute only |
outer-size |
<number> |
— | attribute only |
pattern |
<ordered-dither-pattern> ("bayer2" | "bayer4" | "bayer8" | "bayer16" | "white-noise") |
— | attribute only |
pen-down |
<number> |
— | attribute only |
pen-up |
<number> |
— | attribute only |
persistence |
<number> |
— | attribute only |
quaternion |
<quaternion> ({ <number>, <number>, <number>, <number> }) |
— | attribute only |
remap-curve |
<remap-curve> |
— | attribute only |
remap-phase |
<number> |
— | attribute only |
scale |
<number> |
— | attribute only |
seed |
<number> |
— | attribute only |
seed-period |
<number> |
— | attribute only |
segment-length |
<number> |
— | attribute only |
sensor-width |
<number> |
— | attribute only |
shadow-dot-density |
<number> |
— | attribute only |
shaft-length |
<number> |
— | attribute only |
shaft-radius |
<number> |
— | attribute only |
shape |
<dither-shape> ("circle" | "square" | "diamond" | "line") |
— | attribute only |
size-jitter |
<number> |
— | attribute only |
size-jitter-scale |
<number> |
— | attribute only |
size-x |
<number> |
— | attribute only |
size-y |
<number> |
— | attribute only |
size-z |
<number> |
— | attribute only |
softness |
<number> |
— | attribute only |
softness-space |
<field-space> ("fraction" | "screen" | "world") |
— | attribute only |
solid-type |
<platonic-solid> ("tetrahedron" | "hexahedron" | "octahedron" | "icosahedron") |
— | attribute only |
source |
<id-ref> |
— | reference by id |
speck |
<number> |
— | attribute only |
spline |
<id-ref> |
— | reference by id |
strength |
<number> |
— | attribute only |
swell |
<number> |
— | attribute only |
tangential |
<boolean> |
— | attribute only |
target |
<id-ref> |
— | attribute only |
texture-scale |
<number> |
— | attribute only |
threshold |
<number> |
— | attribute only |
threshold-space |
<field-space> ("fraction" | "screen" | "world") |
— | attribute only |
tile |
<raster-tile> ("none" | "repeat") |
— | attribute only |
time-scale |
<number> |
— | attribute only |
tonemap |
<id-ref> |
— | reference by id |
tonemap-blend-mode |
<blend-mode> ("normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" | "plus-lighter") |
— | attribute only |
tooth |
<number> |
— | attribute only |
tooth-scale |
<number> |
— | attribute only |
top-radius |
<number> |
— | attribute only |
up-node |
<id-ref> |
— | reference by id |
up-reference |
<id-ref> |
— | reference by id |
value |
<number> |
— | attribute only |
values |
<number-list> (<number>[,<number>]*) |
— | attribute only |
wavy |
<number> |
— | attribute only |
wavy-scale |
<number> |
— | attribute only |
width |
<number> |
— | attribute only |
width-profile |
<width-profile> ({ <width-profile-basis> }) |
— | attribute only |
width-space |
<stroke-space> ("screen" | "world") |
— | attribute only |
Used in guides: Scene basics