loading code fetching the highlighted snippet
FIG-001/ ANIMATE
multi-property keyframes.
Three properties (scale, rotate, borderRadius) animate in lockstep as arrays of keyframes. times aligns each value to a normalised t — the square grows, then turns into a spinning circle, then settles back.
- Pass an array as any animate value to walk through keyframes —
scale: [1, 2, 2, 1, 1]traces five samples. Multiple properties with arrays of the same length keep step automatically. -
times: [0, 0.2, 0.5, 0.8, 1]maps each keyframe to a normalised t in[0, 1]— independent of duration. Cluster keyframes near0.5for a held middle state, spread them for steady motion. -
repeat: Infinity+repeatDelay: 1loops the sequence with a one-second breath between cycles. Useful for ambient idle animations that don't compete for attention.
category · animate
sheet · sheet 01 / 01
⟳ to re-run