MARKETPLACE
PLUGINS
CSS ANIMATIONS (40 PLUS)
CSS Animations (40 Plus) logo

CSS Animations (40 Plus)

Published March 2020
   •    Updated this week

Plugin details

Add 40+ CSS animations to Bubble elements like text, images, buttons, and groups. Trigger animations via workflows or run them in a loop to highlight actions and add motion to your interface.
       



⚡ Main Functions:

40+ Animation Types.  
   Apply fade, bounce, zoom, rotate, slide and other motion effects.
Element-Level Control.  
   Animate texts, images, buttons, groups, and shapes.

⚡ Key Features:

⚙️ Workflow Triggers  
     Start animations in response to user actions.
🔁 Looped Animations  
     Run animations continuously to draw attention.



Documentation

We’ve created a detailed step-by-step guide for the CSS Animations (40 Plus) plugin. It includes a comprehensive overview of all features, practical use cases, and answers to frequently asked questions.

       

FAQ

What is the CSS Animations (40 Plus) plugin?
It lets you apply more than 40 different CSS-powered animations—such as bounce, fade, zoom, slide, rotate, and more—to Bubble elements like groups, texts, shapes, images, icons, and buttons.

How do I trigger an animation?
Use a workflow action named “Trigger Animation.” Assign an ID to the target element, choose your desired animation type, and trigger it via user interaction, such as a button click or page event.

Can animations run automatically without user input?
Yes. You can set up recurring animations that continuously loop at specified intervals by using the “Recurring Animation” element and configuring its target, animation type, and repeat timing.

What setup steps are required?
First, enable ID attributes in your Bubble app settings. Then place either the “Animation” or “Recurring Animation” element on the page. Assign an ID to the element you want animated, and configure the animation via workflows or the element’s inspector.

How many animation types are available?
There are over 40 built-in animation options, covering various motion styles like fades, slides, bounces, zooms, and rotations.

What are typical use cases?
Great for drawing attention to call-to-action buttons, enhancing onboarding flows, animating messages or alerts, spotlighting images, or adding dynamic effects to any UI element in your app.

What if I need help or spot a bug?
You can reach out to the plugin’s support team by email with your questions, suggestions, or bug reports.




Our Similar Plugins

- Animations and Effects for Inputs
- Loading Overlay Animations
- 13 Cool Element Animations
- Animations (24+ simple elements)




Support

If you still have questions or unresolved issues, you can contact us.


Risk-free Trial

The most risk-free way to try out this plugin is to subscribe to it. If you unsubscribe a few days later you will be charged on pro-rata basis, so for example if the plugin monthly price is $5 then you’d pay only 17¢ per day ($5/30 days)!

$50

One time  •  Or  $5/mo

5.0 stars   •   1 ratings
107 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Zeroqode - Top Bubble Agency logo
Zeroqode - Top Bubble Agency
Joined 2016   •   846 Plugins
View contributor profile

Instructions

Please refer to the plugin documentation to see how to configure it: https://docs.zeroqode.com/plugins/css-animations-(40-plus)
1. Head over to Settings-General of your application and enable the ability to add id attributes to html elements.

- Animation

1. Drag the "Animation" element onto your page. Add an unique ID to the element that you want to target with the animation.

2. Activate the "Trigger" action within your workflows (example: after press of button). Choose the animation and specify the element id of the element you want to target.

- Recurring Animation

1. Drag the "Recurring Animation" element onto your page. Add an unique id to the element that you want to target with the animation.

2. Within the element inspector of the Recurring Animation element, specify the id of the element that should be targeted, specify the animation that should be used and choose the interval between each animation.

Types

This plugin can be found under the following types:
Element   •   Action

Categories

This plugin can be found under the following categories:
Media   •   Technical   •   Productivity   •   Mobile   •   Containers   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (5.0)

Super simple and works well!
April 8th, 2024
I am very happy with this plugin. It gives a lot of flexibility in terms of elements that it can animate. Also, tons of different animation styles to hide or show an element with an animation.
Hello there! We’re glad to hear your glowing feedback! Thank you for sharing your positive comments about our plugin. For any further assistance or inquiries, please feel free to reach out to us at [email protected]. Best, The RapidDev Team.
April 9th, 2024
  •  
Original reviewer
Bubble