> ## Documentation Index
> Fetch the complete documentation index at: https://captions.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Keyframes

> Animate caption and image overlay position and size over time with Keyframes in Captions iOS. Set start and end points and pick linear, ease, or instant curves.

# Animate Captions and Images with Keyframe Animation

## Overview

To help illustrate how Keyframes work, imagine you have a 1 second clip which was shot at 30 frames per second. On the left, there is a person standing on a soccer field and on the right, there is a soccer goal.

* If you were to **hand animate** the soccer ball moving from the person's foot into the goal, you would draw 30 similar frames with the location of the ball moving slightly from left to right in each frame.
* However, if you were to **animate digitally**, rather than have to draw 30 frames, you could simply set the starting point and ending point for the ball on the first and last frame respectively, and let the animation happen automatically.

## Add Keyframes

<Tabs>
  <Tab title="iOS">
    <Frame>
      <img height="200" src="https://mintcdn.com/captions/ygkgcorr60-_3vsw/help/src/img/keyframes.jpg?fit=max&auto=format&n=ygkgcorr60-_3vsw&q=85&s=4c9caff12cc76b138b5d5ac1eab3e827" alt="Captions iOS keyframe editor for animating caption position and style over time" data-path="help/src/img/keyframes.jpg" />
    </Frame>

    **To add a keyframe:**

    1. Tap **Keyframes**.
    2. Adjust the timeline where you'd like to add a keyframe.
    3. Drag the caption or your image overlay to the desired location. You can also adjust the size of the captions and image overlays by pinching with two fingers.
    4. Choose your animation curve and tap **Apply**

    <Tip>
      Keyframe options: Linear, ease, and Instant.
    </Tip>
  </Tab>

  <Tab title="Web">
    Coming soon to desktop
  </Tab>

  <Tab title="Android">
    Coming soon to [Android](/help/docs/app/android).
  </Tab>
</Tabs>