WordPress is a popular content management system that millions of users use to create and manage their websites and blogs.
One of the great features of WordPress is the ability to add block animations to your posts and pages.
CSS animations grab the user’s attention in different parts of the page.
They can be used to animate pictures, products, or a call to action buttons.
It adds a storytelling element to the page faster than flash or videos and is supported by modern web browsers.
Installing plugin
You can download and install this plugin from the WordPress plugin site.
His full name is Blocks Animation: CSS Animations for Gutenberg Blocks.
After installation, you need to activate the plugin.
The plugin will be shown in the sidebar of your block editor.
Animations menu
On the animations menu you will find 3 types of animations:
- Loading animations-work on almost any block
- Count animations-work with numbers
- Typing animations-work with text
Loading animations
To apply loading animation on a block, picture, or button you need to select the object and from the animation menu, select Loading animations.
From the list of 50 offered animations select one.
The animation will be immediately visible on the object.
Delay
With the delay option, you set the time it takes for the animation to activate after the user has reached the object.
Set the delay from zero to five seconds.
Animation speed
There are five different animation speeds: slow, slower, default, fast and faster.
Typing animations
You can apply typing animations to text and headings.
The letters will appear as if you were typing them on the keyboard.
Simply select the text and select typing animations from the top menu.
Counting animations
In a similar way, you activate counting animations.
Select a specific number and select counting animations from the drop-down menu.
Examples of animations
This is count animation-
Animated pictures (flip on z axe) with different delays.
Animated button (bounce in)
In the end, I must mention that the author of this plugin is Themeisle.
The plugin works with many different themes and other plugins and it is well-coded so it will never slow down your website.