Time Controls

Although in the plugin configuration, we define the default animation timings, you can override them to play with your creativity and make some elements appear after others and/or make the animations of some elements faster than others.

Animation speed

To control the speed or duration of the animation you can use the following classes (you can use only one, you must not use several per element):

.fb-anim--t-0-3s

.fb-anim--t-0-5s

.fb-anim--t-0-7s

.fb-anim--t-1s

.fb-anim--t-1-3s

.fb-anim--t-1-5s

.fb-anim--t-1-7s

.fb-anim--t-2s

.fb-anim--t-2-5s

.fb-anim--t-3s

.fb-anim--t-4s

.fb-anim--t-5s

Animation delay

The animation delay is very useful for making eye-catching animations, you can make some elements appear later than others. You can control the delay with the following classes (you can use only one per element, you must not use several per element):

.fb-anim--nodelay (This class is very useful for the first elements on the screen when we do not want them to have a delay in the animation.)

.fb-anim--delay-0-3s

.fb-anim--delay-0-5s

.fb-anim--delay-0-7s

.fb-anim--delay-1s

.fb-anim--delay-1-3s

.fb-anim--delay-1-5s

.fb-anim--delay-1-7s

.fb-anim--delay-2s

.fb-anim--delay-2-5s

.fb-anim--delay-3s

.fb-anim--delay-4s

If you add new animations to the page, after saving it takes 2 seconds to generate the CSS.

If you are using ACSS make sure you have version 2.7 or higher for best compatibility.

.fb-anim--fade-in combines very well with all animations.

Activate and deactivate the A/F button in the editor to restart the animation.

Animations do not work with position fixed elements.