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?
- Where does the word keyframe come from?
- What is the difference between a frame and a keyframe?
- What is a frame?
- How are keyframes used in keyframe animation software?
- What changes can you make with keyframes on an object?
- What changes can you make to keyframes?
- What are the main types of keyframes?
- What are the advantages of keyframes?
- What are the disadvantages of keyframes?
- What are the use cases for keyframes?
- How can you use keyframes in SVGator?
What is a keyframe?
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:
- Set a keyframe at the starting position (A)
- Set another keyframe at the ending position (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).
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.
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.
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:
- Mark the initial state of an object with a keyframe.
- 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.
- 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.
- 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.
- Hit play and see a smooth transition between the two states of the object 🎉
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.
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.
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 |
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.
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. |
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.
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 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.
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.
What are the use cases for keyframes?
The main use cases for keyframes are video production and animation:
- 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.
- 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.
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.
