In this week’s tutorial, we are going to show you how you can add attention-grabbing pure CSS Animations to your Divi modules. We will work together to add the CSS code to your Divi install, customize the CSS to change things like the duration of the CSS animations, and more.

This might sound complicated, but I promise you’ll be a pro in no time. Check out the preview below to have a quick look at what we will be creating.

COMPLEXITY

Easy

TIME

10 Minutes

ASSUMPTIONS

  • Basic knowledge of Divi and WordPress.
  • Divi and your Child Theme are already installed and configured.

 

VERSIONS

Divi 4.9.7

Preview:

Add attention grabbing pure CSS Animations to your Divi modules

Why add attention-grabbing pure CSS Animations to your Divi modules?

Because they are AWESOME! That is why.

Thank you for coming to my TED Talk.

Jokes. Mostly. Divi already comes with 7 stock animations that are super simple to use if you want to create some basic animations, but what do you do when you want something more complex and unique? You hit up the Divi Engine blog of course!

With more complex animations you can draw the user’s attention to certain parts of your page like a buy button, maybe a sale you have going on, or maybe you just want to add some creative flair.

In this tutorial, we are going to show you how to add attention-grabbing pure CSS Animations to your Divi modules that accomplish pretty complex effects by utilizing keyframes. Don’t know what keyframes are? Think of them as different styles, positions, or shapes applied to your Divi module over a specific time period. This time period can be broken up into percentages (or waypoints) so that your Divi module can have different states at different times within that specified period.

What are CSS keyframes?

CSS Keyframes definition by the Mozilla teamΒ  ⬆️

Basic Anatomy of CSS Animations and Keyframes

I just want to spend another second on CSS Keyframes before diving into how to add attention-grabbing pure CSS Animations to your Divi modules because you can do some cool things if you understand what they do better.

Let’s take a look at the code below:

animation: colorchange 4s infinite;

So, in that code, we have a class that declares our animation. It will use the keyframes defined in “colorchange”, the entire animation will last 4 seconds, and it will repeat an infinite number of times.


@keyframes colorchange {

0% {background-color: red;}

25% {background-color: green;}

75% {background-color: blue;}

100% {background-color: yellow;}

}

On line 5 we declare the set of CSS Keyframes which we also used on line 2 where we declared our animation. Moving to lines 6 to 9, the percentages represent a percentage of our 4-second animation and the value of a CSS property at that time.

Can you guess what happens if you add this code to a Divi module?

You’re right! At 0 seconds, the module with that “.de-colorchange” class assigned will have a red background, between second 0 and second 1, it will fade to green, between second 1 and second 2, it will fade from green to blue, and so forth. In the end, the animation will start over.

Granted, this is a very simple example, but how cool is that? Are those gears in your head turning yet?

Now that we have a better idea of how CSS animations work, let’s look at how to add attention-grabbing pure CSS Animations to your Divi modules.

How to add attention-grabbing pure CSS Animations to your Divi modules

Armed with some basic knowledge of CSS animations it is time to add some gorgeous CSS animations we crafted for you to your Divi site. We put together 3 animations we thought were pretty awesome, and we hope so do you. All you need to do is choose the animation you want to add, copy the code, then follow along with the tutorial.

You can follow along with the video, or you can follow the text instructions below.

Our 3 CSS Animations to choose from for this Tutorial:

Divi Engine

Focus-In Animation

This is a very cinematic animation that would work great as a title reveal on a creative site for something like a production company, or maybe you just feel like getting a little fancy, do you πŸ™ƒ

NOTE: This CSS Animations looks and works best when it is centered on the page.

Divi Engine

Text Pop-Up Animation

This makes for another great animation that literally looks like it is jumping off the page. It would work fantastic for a title or maybe just some statement you want to impressive you visitor.

Attention Wobble Animation

Nothing like a good wobble to grab the attention of your visitors, this is my go-to for reminding them that there is a call to action here. This works great for buttons intended to draw the user in. The slight wobble is subtle and draws the eye every few seconds.

NOTE: This CSS Animations looks and works best when it is centered on the page.

Video Tutorial

Text Instructions

If you prefer to quickly copy and paste the text and settings for this tutorial, please scroll down and you will see everything as it relates to the steps found in the video tutorial.

Step1) Select the CSS Animation you want to add to your Divi module

Click here or scroll up to our 3 CSS animations and copy the code below the one you’d like to give a spin.

Step 2) Add a Code Module and Paste the Code

Navigate to the page where you will add the CSS animation to your Divi module.
Add a code module anywhere on the page.
Open the code module and paste the CSS code between opening and closing style tags.

Paste Divi CSS Animation code here

Step 3) Add the CSS class to your Divi Module

Copy the CSS class in for the CSS animation you want to add to your Divi module.
Open the settings for the Divi module which you want to animate.
Head over to the advanced tab.
Past the class (without the preceding . ) into the CSS class field.
Save your work!

Divi CSS Animation Class

NOTE:Β Don’t be alarmed if the animation you chose does not loop as they do in the previews because we did that intentionally to demonstrate the animations. Some animations would be overkill if they looped in the infinity. That said if you would like to loop the animation infinitely all you need to do is add infinite in the animation declaration. More on how to do that over here.

How awesome are you? You did it!

pure CSS Animations to your Divi modules

Conclusion

When you add attention-grabbing pure CSS Animations to your Divi modules, you say no mediocrity, not today! With just a tiny little bit of new knowledge and practice, you are on your way to stop making that Divi site look like a Divi site. There are plenty of resources online to find some awesome CSS animations, just check out Codepen for some inspiration, or create your own from scratch over at CSS Animate.