(Last Updated: September 14, 2017)

CSS3 animation keyframes play a crucial role in creating HTML5 animation in Saola Animate. So, it’s a required task to know how to work with keyframes. Today’s article explains how to move and copy animation keyframes in Saola Animate.

Moving Animation Keyframes

When creating animation keyframes, chances are a keyframe isn’t at the right position. For instance, a starting keyframe of a segment exists early, making the segment occur before the desired time. In that case, you have to move the keyframe to a later time in the Timeline.

Moving animation keyframes is a piece of cake in Saola Animate. It’s possible to move individual or multiple keyframes at once. With multiple keyframes selected, you move them all together without changing their relative distance to each other.

Step 1: Select one or more animation keyframes (1). Selected keyframes turn from white to yellow.

move animation keyframes 1

Step 2: Drag the selected keyframes to the desired time (2). That way you also change the segment duration. Remember that a longer segment defines a slower animation.

Note: When dragging a keyframe, you may drag it to another keyframe. In that case, the animation segment has the same starting and ending keyframes. Its duration becomes zero. The animation is displayed as a special keyframe (3) on the Timeline.

Besides, you can drag to adjust the timing of a segment. To do that, select the entire segment and drag it left or right along the Timeline.

move animation keyframe 2

Copying and Pasting Animation Keyframes

To speed up the animation-making process, you can copy animation keyframes. In Saola Animate, it’s possible to copy multiple keyframes of multiple elements and paste them onto the Timeline of the same or of other elements.

Step 1: Select one or more animation keyframes (4).

copy animation keyframes 1

Step 2: Press CTRL+C to copy. Or, click the Copy button (5) on the toolbar.

copy animation keyframes 2

If you want to cut the selected keyframes, press CTRL+X or click the Cut button (6) on the toolbar.

Step 3: Move the Playhead (7) to the desired position.

copy animation keyframes 3

Step 4: In the Timeline pane, do either of the following:

  • To paste the copied keyframes to the same elements, do nothing as the elements are still selected.
  • To paste the copied keyframes to different elements, select those target elements (8).

Step 5: Press CTRL+V to paste. Or, click the Paste button (9) on the toolbar. The keyframe (10) is pasted at the Playhead position.

Note: You cannot copy keyframes between elements that don’t have the same properties. For example, elements can move in either X, Y Motion mode or Motion Paths mode. So, you cannot copy a Top keyframe (X, Y Motion) to an element moving with the Location property (Motion Paths).

Additionally, like copying keyframes, you can copy animation segments and paste them on the Timeline of the same or of other elements.

copy animation segments

That’s how to move and copy animation keyframes in Saola Animate. Feel free to contact us if you need any help.

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