> For the complete documentation index, see [llms.txt](https://docs.lottielab.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lottielab.com/editor/animating/timeline/keyframes.md).

# Keyframes

[Adding a keyframe](/editor/animating/timeline/keyframes/add-a-keyframe.md) is the core action for animating in Lottielab. A keyframe stores the change you've made to the [properties](/editor/properties.md) of your object/layer at a point in time. 

You can see the change at a glance using [keyframe thumbnails](/editor/animating/timeline/keyframes/keyframe-thumbnails.md) or by playing back your animation.

The basic logic of a keyframe is as follows:

* If you change the dimensions of a rectangle shape to `20px by 20px` in `Keyframe 1`.
* Then go to another point in time and change the dimensions of the same shape to `40px by 40px` by adding another keyframe (`Keyframe 2`).
* You will have an animation of the rectangle **increasing in size** from `Keyframe 1` to `Keyframe 2`.

{% content-ref url="/pages/Z5haToBj0VB6OxORxZfI" %}
[Add a keyframe](/editor/animating/timeline/keyframes/add-a-keyframe.md)
{% endcontent-ref %}

{% content-ref url="/pages/hUTu1PAA91P3WAzaTxp1" %}
[Keyframe thumbnails](/editor/animating/timeline/keyframes/keyframe-thumbnails.md)
{% endcontent-ref %}