Animations

Animation Duration

The Animation Duration property defines how long the animation lasts.

Modify

1. Select a block

2. Open the Block Inspector

3. Navigate to the Design tab

4. Open the Effects tab

5. Select the Animation tab

6. Find the Duration property

7. Enter the desired animation duration value

Reset

1. Select a block

2. Open the Block Inspector

3. Navigate to the Design tab

4. Open the Effects tab

5. Select the Animation tab

6. Find the Duration property

7. Click dot to reset

Animation Delay

The Animation Delay property defines how long the transition will be paused before starting. The animation is only delayed on its first iteration.

Modify

1. Select a block

2. Open the Block Inspector

3. Navigate to the Design tab

4. Open the Effects tab

5. Select the Animation tab

6. Find the Delay property

7. Enter the desired animation delay value

Remove

1. Select a block

2. Open the Block Inspector

3. Navigate to the Design tab

4. Open the Effects tab

5. Select the Animation icon

6. Find the Delay property

7. Click dot to reset

Animation Styles

The animation Styles property allows you to add a style to your animation such as: ease, ease in, ease out, ease in out, linear, hue rotate, step start, step end, ease in sine, ease out sine, ease in out sine, ease in quad, ease out quad, ease in out quad.

Modify

1. Select a block

2. Open the Block Inspector

3. Navigate to the Design tab

4. Open the Effects tab

5. Select the Animation icon

6. Find the Styles property

7. Select the desired option from the dropdown menu(ease, ease in, ease out, ease in out, linear, hue rotate, step start, step end, ease in sine, ease out sine, ease in out sine, ease in quad, ease out quad, ease in out quad)

Remove

1. Select a block

2. Open the Block Inspector

3. Navigate to the Design tab

4. Open the Effects tab

5. Select the Styles icon

6. Find the Styles property

7. Click dot to remove

Animation Name

The Animation Name property defines which animation keyframes to use.

The Animation keyframes have to be defined in Custom CSS.

Modify

1. Select a block

2. Open the Block Inspector

3. Navigate to the Design tab

4. Open the Effects tab

5. Select the Animation tab

6. Find the Name property

7. Enter the desired animation name

Reset

1. Select a block

2. Open the Block Inspector

3. Navigate to the Design tab

4. Open the Effects tab

5. Select the Animation tab

6. Find the Name property

7. Click dot to reset

Animation Iteration

The Animation Iteration property defines how many times the animation is played.

Modify

1. Select a block

2. Open the Block Inspector

3. Navigate to the Design tab

4. Open the Effects tab

5. Select the Animation tab

6. Find the Iteration property

7. Enter the desired Iteration value

Reset

1. Select a block

2. Open the Block Inspector

3. Navigate to the Design tab

4. Open the Effects tab

5. Select the Animation tab

6. Find the Iteration property

7. Click dot to reset

Animation Direction

The Animation Direction property defines which direction the animation is played, such as normal, reverse, alternate, alternate-reverse.

Modify

1. Select a block

2. Open the Block Inspector

3. Navigate to the Design tab

4. Open the Effects tab

5. Select the Animation tab

6. Find the Direction property

7. Select the desired option from the dropdown (normal, reverse, alternate, alternate-reverse)

Remove

1. Select a block

2. Open the Block Inspector

3. Navigate to the Design tab

4. Open the Effects tab

5. Select the Animation tab

6. Find the Direction property

7. Click dot to reset

Normal Starts playing the animation at the beginning. The animation is played forwards. If there is an animation loop, all properties are reset.

Reverse Starts playing the animation at the end. The animation is played backwards. If there is an animation loop, all properties are reset to the end properties.

Alternate Starts playing the animation at the beginning. If there is an animation loop, the properties are not reset.

Alternate-reverse Starts playing the animation at the end. If there is an animation loop, the animation is played in reverse.

Animation Fill Mode

The Animation Fill Mode property allows you to specify at what point in the animation the effects are visible (before or after). The fill mode allows you to tell the browser if the animation's styles should also be applied outside of the animation. They can be: none, forwards, backwards, both.

Modify

1. Select a block

2. Open the Block Inspector

3. Navigate to the Advanced tab

4. Open the Effects tab

5. Click on the Animation icon
6. Find the Fill Mode property

7. Select the desired option from the dropdown (none, forwards, backwards, both)

Remove

1. Select a block

2. Open the Block Inspector

3. Navigate to the Advanced tab

4. Open the Effects tab

5. Click on the Animation icon
6. Find the Fill Mode property

7. Click dot to reset

None None of the animations effects apply to the default style: the element is set to its default state before the animation starts, and returns to that default state after the animation ends.

Forwards The last styles from the end of the animation are kept on the element afterwards.

Backwards The styles of the animation will be applied to the element before the animation starts.

Both The styles are applied to the element before and after the animation plays.