Once animations are created in the timeline, you can adjust them by editing the animated elements, by changing keyframes and spans, and by looping the animation.
On this page:
Edit an animated element
When you change an animated element's properties, a keyframe is automatically added at the playhead position if a keyframe doesn't already exist there. You can also select an existing keyframe to edit the element at that specific point in the timeline. Any preceding or following animation adjusts to start or end with the changed properties.
If you make property changes at the first keyframe, you edit the base properties of the element. Subsequent keyframes inherit the base properties unless you specify different property values at those keyframes.
If you select multiple keyframes and edit the properties of the element or elements, the changes apply at all the selected keyframes.
If an element doesn't need to be present for the full animation timeline, you may want to set its visibility range so that it's hidden outside of the range.
Change animation easing
To change the easing of an animation, right-click the span you want to change, then select a new easing or Easing options... to specify custom easing.
Loop an animation
- On the timeline, click the Set animation repeat
button on the animation layer that you want to loop.
- In the pop-up menu, select an option:
- Infinite - The animation loops infinitely.
- ___ times - The animation loops to play the specified number of times in total.
- None - The animation does not loop.
Layers with visibility ranges cannot be looped.
Looping a layer changes the animation in the published document.
Looping animation playback only affects the preview on the stage.
Adjust keyframes and spans on the timeline
Select keyframes and spans
There are several ways to select keyframes and spans:
- Click a keyframe or span to select it. Selecting two consecutive keyframes also selects the span between them. Similarly, selecting a span automatically selects the surrounding keyframes as well.
- Shift+click to select multiple contiguous keyframes or spans.
- Ctrl+click (Windows) or ⌘+click (Mac) to select or deselect discontiguous keyframes or spans.
- Click and drag a rectangular selection marquee to select all the keyframes within the rectangle. Spans are only selected if both their keyframes are included inside the marquee.
- Ctrl+click and drag (Windows) or ⌘+click and drag (Mac) a marquee to switch whether keyframes are selected or not. Keyframes inside the rectangle that aren't currently selected will be selected, while keyframes that are already selected will be deselected. Again, spans are only affected if both their keyframes are included inside the marquee.
-
Double-click a layer within the timeline to select all keyframes, spans, and visibility range handles on that layer.
Move keyframes and spans
After selecting keyframes or spans, you can move them by dragging them along the timeline to a new location. The animation timing changes accordingly.
Scale animations
You can scale animations to make them longer or shorter while keeping the spacing between keyframes proportional. To scale an animation, follow these steps:
- Select the keyframes or spans that you want to scale. They can be on different layers.
- Hold Shift while dragging one of the selected keyframes left or right. The animation length stretches or shrinks depending whether you're dragging away or toward the midpoint of the animation. The other selected keyframes will move a proportional distance, except for the keyframe at the farthest end, which remains stationary.
- If you enabled timeline snapping, snapping only applies to the keyframe you drag.
- Keyframes can't overlap or be less than 0.1 ms away from another keyframe.
- Unselected keyframes don't move, but they can restrict the movement of selected keyframes.
Timeline Keyframe Scaling - Google Web Designer
Copy and paste a keyframe
You can copy and paste a keyframe to a different time on the same layer, to a different layer, or even to a different page or document's timeline. The pasted keyframe will retain its animated properties, but not animation easing or any motion path.
You can copy and paste a keyframe using any of the following methods:
-
Select the keyframe to copy, press Control+C (Windows) or ⌘+C (Mac), then click on the new position on the timeline and select the destination layer or layers. Press Control+V (Windows) or ⌘+V (Mac) to paste.
-
Right-click the keyframe to copy. Select Copy keyframe from the pop-up menu, then right-click on the new timeline position for the destination layer and select Paste keyframe from the pop-up menu.
-
Alt+click and drag (Windows), Option+click and drag (Mac), or click+Alt and drag (Linux) a keyframe to duplicate it at the ending position. This method doesn't work across pages, documents, or timelines for nested animations.
If you copy and paste a keyframe into a layer that previously had no keyframes, a new keyframe will be automatically inserted at 0s along with the pasted keyframe unless you're pasting the keyframe at 0s.
If you copy and paste a keyframe onto an existing keyframe, the animated properties of the pasted keyframe will overwrite the corresponding animated properties of the existing keyframe.
Delete keyframes
To delete a keyframe, right-click (Windows) or Control+click (Mac) a keyframe, and select Delete from the pop-up menu.
Edit keyframes rules in the CSS panel
If you're familiar with CSS keyframes rules (starting with the keyword @keyframes), you can use the CSS panel to view and edit animation styles while in Design view. The timeline and the stage automatically reflect changes you make in the panel.
Working with keyframes rules
- Select a single animated element to view the keyframes rule for that element in the CSS panel.
- Add keyframes between existing keyframes by clicking Insert keyframe.
- Edit keyframe percentages.
- Add, edit, and delete animated properties for a keyframe.
- Toggle an animated property on or off across the entire animation by clicking the checkbox next to the property name.
- Delete an individual keyframe by clearing the percentage or by deleting all animated properties for that keyframe.
- Delete all CSS animation for an element by selecting the keyframes rule and clicking the Delete selected rules
button at the bottom of the panel.
Editing keyframe rules in CSS panel
Limitations
- You can't modify the easing.
- You can't add a keyframe after the last keyframe. Use the timeline instead.
Learn more about using the CSS panel.