Adding CSS Animations To WordPress
Animations can be an engaging and visually interesting feature for your web pages. However, building out animations with Flash or JavaScript will eat up a significant chunk of your site’s resources.
Fortunately, you can add animations to your WordPress website with Cascading Style Sheets (CSS) instead. This coding language enables you to incorporate unlimited animations on your site, but is still relatively approachable and easy to learn.
In this article, we’ll discuss how CSS animations work and how to add a CSS animation property to your website with and without plugins. Let’s get moving!
How Do CSS Animations in WordPress Work? (And Why You Should Use Them)
CSS3 affords users the opportunity to create animations by changing the style of an element (for example, an image or button) over time. You can modify as many CSS properties of the element as you want, as many times as you want.
Unlike Flash or Javascript animations, CSS animations avoid browser compatibility issues and complicated coding. This enables you to draw attention to important features without negative side effects such as decreased performance.
Adding CSS Animations in WordPress With A Plugin
If you’re not confident in your coding skills, we’ve got you covered. You can easily create CSS animations with a plugin instead.
Step 1: Install and Activate a CSS Animation Plugin
To get started, you’ll need to install a CSS animation plugin. We’re using Blocks Animation: CSS Animations for Gutenberg Blocks, a relatively new tool made specifically for the Block Editor.
You can find this plugin by navigating to Plugins > Add New in your WordPress dashboard. Once you locate it, click on Install Now and then Activate:
After the activation is complete, go to the post or page where you want to include your simple animation.
Step 2: Design Your CSS Animation in WordPress
Next, click on the element you want to animate. In the Block tab of the sidebar, look for the section labeled Animation, which was added when we activated the plugin in Step 1. Here you’ll see a drop-down menu listing several different effects:
You can play around with as many animation options as you want to find the one that suits your content.
Step 3: Customize Delay and Speed
The Blocks Animation plugin also comes with a timing function to customize your animation’s Delay and Speed:
The first of these two settings postpones the start of the animation. This may help draw attention to your element after the page has loaded, or enable you to use animations in combination, as we’ll demonstrate shortly. You can set the animation delay property as long as five seconds.
Using the speed drop-down, you can make your animation Slow, Slower, Fast, or Faster. A slower animation may be more subtle and less jarring for visitors, while a faster animation will do more to grab their attention.
Step 4: Save and Preview Your Animation in WordPress
We recommend saving your post or page as a draft and previewing your animated element before publishing it. Make sure to save the animation name property as well if you’re working with multiple CSS animations on one page. While animations can prove very useful, they also have the potential to become distracting and make your pages feel cluttered.
Previewing your page and keeping your animations relatively simple will prevent these undesirable outcomes. Below, you can see our finished CSS animation example, which pairs an animated image with the button we styled in the previous steps:
In the event that you find your animation doesn’t fit with the rest of your content or have the effect you desired, you can simply head back to the Block Editor and adjust it. That’s the beauty of using a CSS animation plugin – it’s quick and easy.
Adding CSS Animations in WordPress Without A Plugin
If you’re comfortable editing your theme’s files, you can manually create custom animations without a plugin. It takes a bit of coding know-how, so this solution may best be left to those with development experience.
Before you get started, be sure to back up your site. It’s also wise to use a child theme, so that you can easily revert to your theme’s default files if you feel the need to.
Step 1: Understand the CSS Properties Involved
Before you actually do any editing, there are eight important properties to keep in mind when creating CSS animations:
- @keyframes: Specifies the styles that will be applied to the element through the animation.
- animation-name: Creates a name you can use to reference the animation elsewhere in your code.
- animation-duration: Defines how long the animation should run.
- animation-delay: States how long an animation should wait to begin once the page is loaded.
- animation-iteration-count: Notes how many times the animation should run.
- animations-direction: States in what direction the animation should run.
- animation-timing-function: Determines the speed curve of the animation.
- animation-fill-mode: Specifies a style for the element when the animation is not playing.
- animation: A shorthand property for binding keyframes to elements.
The most important of these properties to understand is the ‘keyframe.’ This term comes from hand-drawn animation processes, where the main frame was called the keyframe and others were drawn to lead into or out of it.
In CSS animation, the keyframe specifies what is happening and when. Take this one, for instance:
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
The keyframe above states that 25 percent of the way through the animation, the background color of the specified element will change from red to yellow. Percentages are typically used to define the timing of the animation. However, from and to can be used in place of 0% and 100%, respectively.
Step 2: Create Your animate.css File
In order to add CSS animations, you’ll need to create a file in your preferred text editor using the properties above. It should include keyframes for any animations you want to use. Then you’ll bind them to specific CSS classes so that you can apply them to elements on your site.
Here’s an example. In the code below, we first create a CSS keyframe animation using the transform and visibility properties, which will enable us to slide an element in from the right side of the screen:
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
We then have to bind that keyframe to a CSS class. In this case, it’s been named slideInRight. This code will be placed directly after the keyframe above in the file:
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
You can repeat this process to create as many animations as you like. Then, save the file as animate.css. Alternatively, you can download the popular Animate.css file. It contains the keyframes and CSS classes for dozens of popular animations so you don’t have to code your own complex animation.
Step 3: Upload Your animate.css File to Your Site
Once your animate.css file is complete, you’ll need to upload it to your theme’s directory. To do this, access your site using File Transfer Protocol (FTP) and an FTP client such as FileZilla. You can find the necessary credentials in your hosting account.
You’ll need to enter your public_html directory, navigate to wp-content > themes, and find the folder for your active theme (or child theme):
Look for a subdirectory labeled css. If one exists, upload your animate.css file (or the animate.mini.css file from Animate.css) to it. In the event you don’t already have this folder, you can easily create a new subdirectory and name it accordingly:
After your file is successfully uploaded, don’t leave your FTP client right away. You’ll need to do a little file editing in order to access this stylesheet on your WordPress site.
Step 4: Call the Animate Stylesheet Via functions.php
Next, in your active theme’s folder, find your functions.php file. At the end, add this snippet of code:
add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' );
function wpb_animate_styles() {
wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all');
}
Note that, if you uploaded the animate.min.css file from Animate.css, you’ll need to use animate.min.css in the last line instead of animate.css.
This enables your theme to call the stylesheet you just uploaded so that you can apply the classes in it to elements on your site. Once your changes are saved, make your way back to your WordPress dashboard.
Step 5: Apply Animations in WordPress Using CSS Classes
You can now apply any class in your animate.css file to elements in your posts and pages. If you’re using the Animate.css file, you can reference a complete list of all it includes on GitHub.
Navigate to the post or page containing the element you wish to animate. In the Classic Editor, switch over to the text editor. If you’re using the Block Editor, click on the three-dot icon from the block toolbar and select Edit as HTML:
Then, add the animated class and the class for your animation to the element tag:
Finally, preview your post or page. Your animation should now be working:
You can adapt this process to incorporate any animation in your animate.css file.
Keep Your CSS Animations in WordPress Looking Great With WP Engine
Using visually interesting features such as animations can engage your site’s visitors and make for a more professional online presence. Here at WP Engine, we pride ourselves on providing the best tips and tricks for WordPress developers so your site always looks its best.
When combined with our top-notch hosting platform for WordPress, you’ll have all the tools you need to impress your users. Check out our plans today!
