Keyframes

Keyframes let you sequence animations step-by-step on a single element.
Instead of just animating from A to B, you can define multiple intermediate steps.

Keyframes are passed directly to animatry.to() or from() using the keyframes property.

Property based keyframes

Define a sequence of values for each property.
Each step will be evenly distributed across the total duration.

animatry.to('.box', {
  keyframes: {
    x: [0, 100, 100, 0, 0],
    y: [0, 0, 100, 100, 0],
  },
  rotate: 180, // property outside keyframes
  duration: 2,
  repeat: -1,
})

Object based keyframes

Define each keyframe as an object. Properties in each frame override the previous one.
This gives you a timeline-like control over individual transitions.

animatry.to('.box', {
  keyframes: [
    { x: 100 },
    { y: 100 },
    { x: 0, rotate: 90 },
    { y: 0 },
  ],
  duration: 2,
  repeat: -1,
})

Percentage based keyframes

This syntax mimics CSS @keyframes and gives you precise timing control.
Values are defined at specific percentages of the animation duration.

animatry.to('.box', {
  keyframes: {
    '0%':   { x: 0,   y: 0 },
    '25%':  { x: 100, y: 0 },
    '50%':  { x: 100, y: 100, rotate: 90 },
    '60%':  { x: 0,   y: 100 },
    '100%': { x: 0,   y: 0 }
  },
  duration: 2,
  repeat: -1,
})