Combine animations

You can add multiple classes to the same element to combine basic and advanced animations.

Examples of combinations

  • (Zoom or Slide) with Fade
  • (Sweep or Circle or Fan) with Slide and Fade
  • (Sweep or Circle or Fan) with Zoom and Fade
  • Ring with (Sweep or Circle or Fan) and Slide and Fade

Restrictions

  • You cannot combine animations from the same group.
  • You cannot combine Zoom, Slide, bounce and rotate animations because all use ‘transform.’
    • There is an auxiliary animation called .fb-anim-slide-relative with this class you can combine the slide animation with other animations that use transform. Just keep in mind that this class adds position relative to the element.
  • You cannot combine Fan, Sweep, and Circle animations because all use ‘clip-path’.
  • .fb-anim-border cannot be combined with other animations and only works with elements with square borders.

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.