# Keyframes

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

You can see the change at a glance using [keyframe thumbnails](https://docs.lottielab.com/editor/animating/timeline/keyframes/keyframe-thumbnails) 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="keyframes/add-a-keyframe" %}
[add-a-keyframe](https://docs.lottielab.com/editor/animating/timeline/keyframes/add-a-keyframe)
{% endcontent-ref %}

{% content-ref url="keyframes/keyframe-thumbnails" %}
[keyframe-thumbnails](https://docs.lottielab.com/editor/animating/timeline/keyframes/keyframe-thumbnails)
{% endcontent-ref %}