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:
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.
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
NOTE: This CSS Animations looks and works best when it is centered on the page.
Text Pop-Up Animation
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
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.
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!
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!
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.
This is fun! I tried the background color animation, but wanted it to play only once. If I do that, after the animation the background turns to white. Do you guys know a way to make it stick at the 100% keyframe color instead?