(Last Updated: September 13, 2017)

Using animation keyframes, you can create stunning CSS3 keyframe animation. As a CSS3-based animation tool, Saola Animate lets you create animation keyframes easily with a few clicks of the mouse. This article shows you the steps to create and edit animation keyframes in Saola Animate.

Creating Animation Keyframes

A keyframe defines a property value at a specific time. To create CSS3 keyframe animation, you need two keyframes that define different values. In Saola Animate, it’s possible to create animation keyframes for one or more elements at once. However, all elements you select must have that same property.

Below are five ways to create animation keyframes.

1. Creating Animation Keyframes from Properties Pane

The Properties pane displays all available properties of selected elements. Do the following steps to create animation keyframes from this pane:

Step 1: Select one or more elements (1).

create css animation keyframes 1

Step 2: Move the Playhead (2) to the desired position.

Step 3: In the Properties pane, click the Add Keyframe button (3) next to the property you want to animate.

create css animation keyframes 2

This creates an animation keyframe [Rotate, time: 1s, value: 0] (4) at the Playhead position.

create css animation keyframes 3

2. Creating Animation Keyframes from Timeline Pane

In the Timeline pane, the Add Keyframe button attached to a certain property only appears when that property is animated. That’s because initially the Timeline displays no property. Only after you add at least one keyframe of a property can you see it listed in the Timeline.

To create animation keyframes using the Add Keyframe button, do as follows:

Step 1: Move the Playhead (5) to the desired position.

create css animation keyframes 4

Step 2: In the Timeline pane, click the Add Keyframe button (6) of the property you want to add a new keyframe. This inserts a new keyframe [Rotate, time: 3s, value: 0] (7).

create css animation keyframes 5

Note: In the Timeline pane, you don’t need to select an element first because the Add Keyframe button (6) is associated with a certain property of a certain element.

3. Creating Animation Keyframes from Timeline Menu

The third way to add animation keyframes is to use the Timeline menu on the main menu. Do the following steps:

Step 1: Select one or more elements.

Step 2: Make sure the Playhead is at your desired position.

Step 3: On the main menu, click Timeline (8) > Add Keyframe (9). A list of available keyframes appears.

create css animation keyframes 6

Step 4: Select the keyframe (10) you want to add. This creates a new keyframe [Left, time: 2s, value: 100px] (11).

create css animation keyframes 7

4. Creating Animation Keyframes from Context Menu

You can use the context menu of an element on the Canvas or in the Timeline pane to insert keyframes. Do the following steps:

Step 1: Select one or more elements.

Step 2: Make sure the Playhead is at your desired position.

Step 3: Right-click an element on the Canvas and point to Add Keyframe (12). A list of available keyframes appears.

create css animation keyframes 8

Or, in the Timeline pane, right-click the element bar > Add Keyframe (13).

create css animation keyframes 9

Step 4: Select the keyframe (14) you want from the list. The new keyframe [Left, time: 4s, value: 100px] (15) is added at the Playhead position.

create css animation keyframes 10

5. Creating Animation Keyframes Automatically

In Auto-Keyframe Mode, Saola Animate automatically creates animation keyframes when you make an edit to an element. To turn this mode on, click the Auto-Keyframe Mode button (16) in the Timeline pane. That way you will save a great deal of time and effort when creating CSS3 keyframe animation.

create css animation keyframes 11

Editing Keyframe Values

CSS3 keyframe animation is created when an element’s property changes from one value to another. For this reason, editing keyframe values is an essential step when building CSS3 keyframe animation.

In Saola Animate, you can adjust keyframe values in different ways. Note that before you edit a keyframe value, make sure you position the Playhead at an existing keyframe.

Step 1: Move the Playhead (17) to the time of the keyframe.

create css animation keyframes 12

A good way to do that is to turn on Snapping mode (18). That way the Playhead will snap to any keyframe on the Timeline (when its red marker line turns orange).

The value of the property appears in both the Properties pane (i.e. in the value box) and the Timeline pane (next to the property name).

Step 2: To edit a keyframe value, do either of the following:

  • In the Timeline pane: Double-click the property value (19) to make it editable. Then, enter a new value. To escape the edit mode, press ENTER or click any elsewhere outside.

create animation keyframes 13

  • In the Properties pane: Select the element or the keyframe, then adjust the property value as desired.

create animation keyframes 14

  • On the Canvas: For some certain properties such as Position, Size, and Rotate, you can change the value visually on the Canvas. For example, drag the rotation handle to adjust the element’s Rotate value.

create animation keyframes 15

Note:

If you don’t position the Playhead at an existing keyframe, changing the property value will affect both the starting and ending keyframes of a segment.

Consider an example including an animation of an element’s Left property. The animation is [Left; 2s, 100px – 200px] with the starting keyframe [Left, time: 2s, value: 100px] and the ending keyframe [Left, time: 4s, value: 200px]. So, the animation starts at the second second with a Left value of 100px. Over two seconds, it moves to the right by 100px, getting the Left value of 200px at the fourth second.

  • If you place the Playhead at either the starting or ending keyframes and change the element’s Left value, only the values of those keyframes change. Thus, this changes the distance the element moves.

In the screenshot below, the Playhead is at the ending keyframe [Left, time: 4s, value: 200px]. Change the keyframe value from 200px to 350px. The element now moves 250px to the right instead of 100px as before.

css3 keyframe animation 1

  • In contrast, if you place the Playhead at any other timestamps and change the element’s Left value, both the values at the starting and ending keyframes change by the same amount. However, the distance the element moves remains the same.

In the screenshot below, the Playhead is at neither the starting nor ending keyframes of a segment. Change the keyframe value from 200px to 350px. The element still moves 100px to the right as before. However, it now moves from 250px to 350px.

css3 keyframe animation 2

As you can see, it’s an easy task to create animation keyframes in Saola Animate. Download Saola Animate today and become a keyframe artist to make great CSS3 keyframe animation.

Join our mailing list to receive the latest news and updates from our team.

A confirmation email has been sent to your mailbox, please confirm your subscription!

Pin It on Pinterest