Create unique effects to bring your WordPress website to life! Our Block Styles plugin offers fun animation and transition effects to engage your website visitors with your content.
Animations #
Step 1: Select an animation name from the drop-down menu.

Step 2: Set a duration for how long you’d like your animation to run. Default duration is in seconds but this can be changed to miliseconds.

Step 3: After you select a duration, you will be presented with several more options:
- Timing Function
- Delay
- Iteration Count
- Direction
Timing Function #
Select a timing function from the drop-down menu.

Delay #
Set a delay for your animation sequence to start. Timing is in seconds by default.
Iteration Count #
Customize the iteration count of your animation.
Direction #
Select a direction from the drop-down menu.

Transition CSS #
Input your own custom CSS in the CSS Property box.

Transform Style #
Function #
Rotate #
When selecting the rotate function, you will need to adjust the angle of rotation. You can use postive values (+) and negative values (-).

Scale #
Adjust the scale to move the block text to the left or the right. The default is 1.

Skew #
Customize the “skew” of a WordPress block by adjusting the angle through inputting a number of using the dial.

Translate #
Adjust the length of the translate function by inputting an amount. Default measurement is pixels but this can be changed to %, EM, REM, VW, & VH.

Masks #
Shape #
- Diamond
- Flower Art
- Cameillia Flower
- Geometric
- Hexagon
- Heart
- Moon
- Star
- Sun
- Wave
- Custom

To start over, click the Clear All button to reset the effects settings.
Interested in purchasing Block Styles? Click here to buy the plugin.
Purchase a membership to unlock all of our products!
- Block Styles
- Dynamic Content
- Styles Library
- Gesso Theme Support