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 tutorial explains how to move and copy animation keyframes in Saola Animate.
This tutorial covers:
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.
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.
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).
Step 2: Press CTRL+C to copy. Or, click the Copy button (5) on the toolbar.
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.
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.
That’s how to move and copy animation keyframes in Saola Animate. Feel free to contact us if you need any help.