# 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. {% hint style="info" %} The Animation keyframes have to be defined in Custom CSS. {% endhint %}
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 ![](https://firebasestorage.googleapis.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-MS33S0eoYwMaMrLb7T_%2F-MVuWEJNsq_9qxQBlZnP%2F-MVuahFD13gVoYG-I1AN%2Ftabler-icon-settings.svg?alt=media\&token=02e43104-b111-4374-96cc-286ef3e49512) 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 ![](https://firebasestorage.googleapis.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-MS33S0eoYwMaMrLb7T_%2F-MVuWEJNsq_9qxQBlZnP%2F-MVuahFD13gVoYG-I1AN%2Ftabler-icon-settings.svg?alt=media\&token=02e43104-b111-4374-96cc-286ef3e49512) 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.