Animate

Once the module is installed and enabled into your web project, you can access this tool from any dropable component under the "Layout" tab. Then click the "Add animation" checkbox and choose your animation.

You can leave the delay and the duration as default or set a value (in second, for instance, 2 for 2s or 0.3 for 300ms). For the delay, you can choose between two behaviors: the time to wait before the animation starts, or the time to wait before displaying the component.

You can also pick an Iteration value if you want to replay the animation.

Please check all the different animation on https://daneden.github.io/animate.css/

Is there a way to start an animation after a few seconds?

Yes! You can set a delay value in seconds. Then there is another property to set, to tell the system how to use the delay. You can choose the "Wait before starting the animation" or the "Wait before displaying the component" value. 

What are the differences between the "How to use delay" property?

Use the "Wait before starting the animation" if you want to display your content, and then, after the chosen delay, play your animation. This is very useful for the end user to add some focus to a component such a button if you choose an attention seeker such the pulse or the bounce effect. You can also use this type of delay for exit effects such a fade out.

Use the "Wait before displaying the component" if you want to hide the content before an entrance such a fading entrance or bouncing entrance effect.

Where can I see all existing effects

Please consult the dedicated page https://daneden.github.io/animate.css/