In this article, we embark on a journey to unravel everything there is to know about keyframes: the origin of the word “keyframe”, all the changes you can achieve using these marker points, types of keyframes, the difference between frames and keyframes, and the best use cases for keyframe animation (featuring SVGator!).

Keyframes have been at the core of animation for a few decades, empowering animators to create seamless transitions and smooth movements.

Table of Contents:

What is a keyframe?

💡
A keyframe in animation is a specific reference point in an animation where a change or adjustment is made to an object's state or property.

Usually, all keyframe-based animation tools use keyframes to change states for animators such as:

  • Position
  • Scale
  • Rotation
  • Opacity
  • And many others

This list includes any other transition that takes place between the predefined starting and ending points. Keyframes are essential for precise control over animation effects and timing in creating motion graphics.

For example, if you would like to create an animated element that moves from the left to the right over the duration of 3 seconds, you should:

  1. Set a keyframe at the starting position (A)
  2. Set another keyframe at the ending position (B)
The animation software will automatically create the in-between positions and create a smooth transition between point (A) and point (B).

The speed of the transition is determined by the distance between the two keyframes in the timeline. A longer distance will mean a slower speed for the element to get from (A) to (B).

Example of using keyframes for animation
Keyframe Animation Example - Made by SVGator

Where does the word "keyframe" come from?

The word "keyframe" comes from the early days of keyframe animation, when each frame was drawn by hand, which was a very time-consuming and difficult task.

🎥
Disney pioneered keyframe animation in the 30s by setting up the main poses of movement to be drawn by artists and the inbetween frames were created by less experienced colleagues or machines.

The company was the first to set up the principles of animation and influenced other studios to adopt their techniques.

Computer animation arose in the 70s as a new technique for producing animations. It followed the keyframe animation principles and adapted them to the digital image generation using mathematical models and algorithms.

What is the difference between a frame and a keyframe?

The difference between a keyframe and a frame is that a frame is a single component from a sequence of frames, while a keyframe is a reference point that marks how the object or element transitions, or changes to that particular frame.

  • Frame: one single component from a sequence of frames
  • Keyframe: marks the changes/transitions assigned to a particular frame

What is a frame?

A frame is a single image within a sequence of images. It is the building block of any video, film, or animation. Each frame is flashed on the screen for a fraction of a second and human persistence of vision blends them together, producing the illusion of movement.

🎥
The number of frames displayed within a second are measured by FPS (frames per second). The standard FPS for videos is 24; higher frame rates produce even smoother motions.

How are keyframes used in keyframe animation software?

Every keyframe animation software follows the same logic and can be used by following the next steps:

  1. Mark the initial state of an object with a keyframe.
  2. Choose whether to leave the initial state as it is or apply more changes to it, which, of course, will represent the new initial state of the animation.
  3. Define how long the animation will be by adding a second keyframe on the timeline at a certain second. This will mark the ending point of the animation.
  4. Change the state of the object at the timing marked by the second keyframe, so that it is different from the state of the object at the first keyframe.
  5. Hit play and see a smooth transition between the two states of the object 🎉

🔍
The state of the object that you are changing should be the same state as the assigned animator that you are adding keyframes to.

Take for example the Rotation animator. You will only change the degrees of the object (between 0 degrees and 359 degrees from the center).

Changing the object’s position, scale level, or any other state except degrees of rotation, won't result in any animated effect.

In SVGator, the first keyframe will be added along the animator right where the playhead is positioned on the timeline. By dragging the playhead on a different second and making the adjustments to the element, another keyframe will be automatically added to mark the end of the transition. The adjustments should match the chosen animator, so if you chose the Rotate animator, you can only adjust the element’s rotation.

Pro Tip: You can also reuse keyframes on the timeline by simply copying and pasting them along the timeline in order to repeat a certain transition for the same element.

You can also copy them to a different element that you want to animate in the same way. Additionally, you can make more adjustments to the keyframes that will change the timing or the behavior of the animation.
Animated man using his laptop to animate keyframes
Using keyframe animation software - Made by SVGator

What changes can you make with keyframes on an object?

There are a large number of changes you can make with keyframes on an object. For example, in SVGator, you have the following options:

Changes made with keyframes to an object
Position Changes the object’s location
Origin Changes the object’s origin (center) point
Scale Makes the object bigger or smaller
Rotate Moves the object in a circle around a fixed point
Skew Makes the object oblique, asymmetrical
Opacity Changes the degree to which an object appears to be transparent
Fill Color Changes the object’s color
Fill Opacity Changes the object’s opacity
Stroke Color Changes a stroke’s color
Stroke Opacity Changes a stroke’s opacity
Stroke Width Changes a stroke’s width
Stroke Offset Changes the location of a dash along a path
Stroke Dashes Changes the dash-gap pattern of a stroke
Filters Adds filters to the object
Types of changes made with keyframes to an object

What changes can you make to keyframes?

The changes you can make to keyframes are the following:

  • Timing between keyframes: Timing between keyframes dictates the speed of the transition between the two keyframes. You can change the timing between two keyframes by increasing or decreasing the distance between them on the timeline.
  • Position of the keyframes: By manipulating the position of the keyframes you can reverse an animation by selecting its keyframes, right-clicking, and choosing "Reverse keyframes." This action will simply interchange the position of two or more keyframes on the timeline.
  • Keyframe easing effects: Keyframe easing effects imply selecting at least one keyframe, to which you can then apply an easing effect from the Easing panel. The easing will apply on the transition from the selected keyframe toward the second/following one.
  • Skipping transitions between keyframes: Skipping transitions between keyframes means that you can also eliminate the transition between two or more keyframes by choosing the Step End or Step Start easing functions. Also known as hold keyframes in other animation tools, these easing functions will simply remove the transition and make jumps between the steps of the element.
💡
Note: Step keyframes support step numbers as well. You can set a certain number of steps between two-step keyframes. The state of a step keyframe will be easy to distinguish in the timeline as the keyframe shape will change to a square instead of a rhombus.
Animated example of changes made to keyframes
Example of changes made to keyframes - Made by SVGator

What are the main types of keyframes?

There are 3 main types of keyframes used in animation software:

Linear Interpolation Keyframe Bézier Interpolation Keyframe Hold Interpolation Keyframe
Linear interpolation creates a uniform and consistent change of values from the beginning to the end, at a constant speed. This is a more complex interpolation that makes it possible to specify the object's velocity and motion path between two points. This maintains the object in a particular pose. It is used to freeze or block a certain keyframe in a static phase. It is also known as a stop-motion keyframe.
The 3 Main Types of Keyframes

Animated example of a linear interpolation keyframe
Linear Interpolation Example

Animated example of a bezier interpolation keyframe
Bezier Interpolation Example

Animated example of a hold interpolation keyframe
Hold Interpolation Example

What is interpolation in the context of keyframes?

Interpolation in the context of keyframes is the process of filling data between two keyframes. The changes made to property values can be calculated in different ways based on what type of keyframes are set.

🔍
Interpolation in animation is a mathematical method used to fill in the unknown values in between two or more specified points. 

What are the advantages of keyframes?

The advantages of keyframes are:

  • They speed up the animation process
  • They let animators create any kind of movement with ease
  • They create smooth transitions
  • They make later changes easy to make
  • They can be reused for other elements because they are easy to copy and paste
The biggest advantage of using keyframes in animation is that they make the creation process far quicker without losing quality.

The animator has to set up only a few important reference points instead of creating hundreds of individual frames.

Keyframe animation software offers a huge range of different animation movements on an advanced level and in a reasonably short time.

Another advantage of keyframes is that the final work will retain the artist’s personal charm and specific hand-drawing style together with sleek movements and a professional finish. Later changes are also easier with keyframes because the editor has to modify only their main values or features instead of going through all of the frames.

Animated apple smiling in the light
Artwork created by Ivan Mesaroš, animated with SVGator

What are the disadvantages of keyframes?

The disadvantages of keyframes are:

  • It can be time-consuming to manually set up and adjust each keyframe
  • Complex movements are challenging to create
  • It is difficult to keep track of them when you have a lot of keyframes set on the timeline

Keyframes have some disadvantages when it comes to producing and handling realistic, complex, and natural movements. These are easier to achieve with motion capture, another technology to record movement.

🤔
Video animations are great for explaining complicated processes and entertaining viewers, but they are not so efficient when it comes to expressing feelings and pushing people to action.

What are the use cases for keyframes?

The main use cases for keyframes are video production and animation:

  1. Post-production: Post-production is the last stage of video-making when color correction, special effects, sound design, and many other editing work takes place. In this stage, creators can add animated filters, graphics, and various animation effects, whether they are making a simple YouTube video or a Hollywood blockbuster.
  2. Creating animations: Animations can be created from scratch using graphic software to draw and animate characters, showcase products, present a process, or just entertain the viewers. Besides traditional motion art production, there is an increasing number of businesses that choose to have animated elements on their websites for better engagement and higher conversions.
Animated example for keyframe uses and their settings
Animated example for keyframe uses - Made by SVGator

How can you use keyframes in SVGator?

You can use keyframes in SVGator in the same way as any traditional 2D keyframe animation software. All you need to do is to follow the steps described earlier. Check out this step-by-step video tutorial below to learn exactly how to use keyframes:

CSS keyframe animation is made easy with SVGator, as well as Javascript keyframe animation because the code is automatically generated in the background.

SVGator offers numerous export options so that you can create a single animation for various purposes: use it on a website, in a mobile app, or post it on your social media channels as a video. A special thing about this tool is that you can also create interactive animations for the web.

Final thoughts

Keyframe animation is a great way to create stunning animations for every platform, so if you’re still hesitant about whether to try it or not, we advise you to start with our newbie-friendly tutorials. The learning curve is truly a breeze!

If you have any questions or you want to share your work, reach out to us on Facebook, Twitter, Instagram, TikTok, Youtube, Pinterest, Reddit, or via email contact@svgator.com.