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\u2019s resources.<\/p>\n\n\n\n
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. <\/p>\n\n\n\n
In this article, we\u2019ll discuss how CSS animations work and how to add a CSS animation property to your website with and without plugins. Let\u2019s get moving! <\/p>\n\n\n\n\n\n
CSS3<\/a> 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. <\/p>\n\n\n\n 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<\/a>.<\/p>\n\n\n\n If you\u2019re not confident in your coding skills, we\u2019ve got you covered. You can easily create CSS animations with a plugin instead.<\/p>\n\n\n\n To get started, you\u2019ll need to install a CSS animation plugin. We\u2019re using Blocks Animation: CSS Animations for Gutenberg Blocks<\/a>, a relatively new tool made specifically for the Block Editor.<\/p>\n\n\n\n You can find this plugin by navigating to Plugins > Add New<\/em> in your WordPress dashboard. Once you locate it, click on Install Now<\/em> and then Activate<\/em>:<\/p>\n\n\n\n After the activation is complete, go to the post or page where you want to include your simple animation.<\/p>\n\n\n\n Next, click on the element you want to animate. In the Block<\/em> tab of the sidebar, look for the section labeled Animation<\/em>, which was added when we activated the plugin in Step 1.<\/em> Here you\u2019ll see a drop-down menu listing several different effects:<\/p>\n\n\n\n You can play around with as many animation options as you want to find the one that suits your content.<\/p>\n\n\n\n The Blocks Animation plugin also comes with a timing function to customize your animation\u2019s Delay<\/em> and Speed<\/em>:<\/p>\n\n\n\n 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\u2019ll demonstrate shortly. You can set the animation delay property as long as five seconds.<\/p>\n\n\n\n Using the speed drop-down, you can make your animation Slow, Slower, Fast,<\/em> or Faster<\/em>. A slower animation may be more subtle and less jarring for visitors, while a faster animation will do more to grab their attention.<\/p>\n\n\n\n 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\u2019re 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.<\/p>\n\n\n\n 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:<\/p>\n\n\n\n In the event that you find your animation doesn\u2019t 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\u2019s the beauty of using a CSS animation plugin \u2013 it\u2019s quick and easy. <\/p>\n\n\n\n If you\u2019re comfortable editing your theme\u2019s 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. <\/p>\n\n\n\n Before you get started, be sure to back up your site<\/a>. It\u2019s also wise to use a child theme<\/a>, so that you can easily revert to your theme\u2019s default files if you feel the need to.<\/p>\n\n\n\n Before you actually do any editing, there are eight important properties<\/a> to keep in mind when creating CSS animations:<\/p>\n\n\n\n The most important of these properties to understand is the \u2018keyframe.\u2019 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. <\/p>\n\n\n\n In CSS animation, the keyframe specifies what is happening and when. Take this one<\/a>, for instance: <\/p>\n\n\n\n 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.<\/p>\n\n\n\n In order to add CSS animations, you\u2019ll 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\u2019ll bind them to specific CSS classes<\/a> so that you can apply them to elements on your site.<\/p>\n\n\n\n Here\u2019s an example. In the code below<\/a>, we first create a CSS keyframe animation using the transform<\/a> and visibility<\/a> properties, which will enable us to slide an element in from the right side of the screen:<\/p>\n\n\n\n We then have to bind that keyframe to a CSS class. In this case, it\u2019s been named slideInRight. This code will be placed directly after the keyframe above in the file:<\/p>\n\n\n\n You can repeat this process to create as many animations as you like. Then, save the file as animate.css.<\/em> Alternatively, you can download the popular Animate.css file<\/a>. It contains the keyframes and CSS classes for dozens of popular animations so you don\u2019t have to code your own complex animation. <\/p>\n\n\n\n Once your animate.css <\/em>file is complete, you\u2019ll need to upload it to your theme\u2019s directory. To do this, access your site using File Transfer Protocol (FTP)<\/a> and an FTP client such as FileZilla<\/a>. You can find the necessary credentials in your hosting account.<\/p>\n\n\n\n You\u2019ll need to enter your public_html<\/em> directory, navigate to wp-content > themes,<\/em> and find the folder for your active theme (or child theme):<\/p>\n\n\n\n Look for a subdirectory labeled css<\/em>. If one exists, upload your animate.css<\/em> file (or the animate.mini.css <\/em>file from Animate.css) to it. In the event you don\u2019t already have this folder, you can easily create a new subdirectory and name it accordingly:<\/p>\n\n\n\n After your file is successfully uploaded, don\u2019t leave your FTP client right away. You\u2019ll need to do a little file editing in order to access this stylesheet on your WordPress site.<\/p>\n\n\n\n Next, in your active theme\u2019s folder, find your functions.php<\/em> file. At the end, add this snippet<\/a> of code:<\/p>\n\n\n\n Note that, if you uploaded the animate.min.css<\/em> file from Animate.css, you\u2019ll need to use animate.min.css in the last line instead of animate.css.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n You can now apply any class in your animate.css<\/em> file to elements in your posts and pages. If you\u2019re using the Animate.css file, you can reference a complete list of all it includes on GitHub<\/a>.<\/p>\n\n\n\n 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\u2019re using the Block Editor, click on the three-dot icon from the block toolbar and select Edit as HTML<\/em>: Then, add the animated class and the class for your animation to the element tag:<\/p>\n\n\n\n Finally, preview your post or page. Your animation should now be working:<\/p>\n\n\n\n You can adapt this process to incorporate any animation in your animate.css<\/em> file. <\/p>\n\n\n\n Using visually interesting features such as animations can engage your site\u2019s 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<\/a> so your site always looks its best.<\/p>\n\n\n\n When combined with our top-notch hosting platform for WordPress<\/a>, you\u2019ll have all the tools you need to impress your users. Check out our plans<\/a> today!\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":" 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\u2019s 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…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":132054,"template":"","resource-topic":[901],"resource-role":[895,896,897],"resource-type":[916],"class_list":["post-94304","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nAdding CSS Animations in WordPress With A Plugin<\/h2>\n\n\n\n
Step 1: Install and Activate a CSS Animation Plugin<\/h3>\n\n\n\n
Step 2: Design Your CSS Animation in WordPress <\/h3>\n\n\n\n
Step 3: Customize Delay and Speed<\/h3>\n\n\n\n
Step 4: Save and Preview Your Animation in WordPress <\/h3>\n\n\n\n
Adding CSS Animations in WordPress Without A Plugin<\/h2>\n\n\n\n
Step 1: Understand the CSS Properties Involved<\/h3>\n\n\n\n
\n
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}<\/pre>\n\n\n\nStep 2: Create Your animate.css<\/em> File<\/h3>\n\n\n\n
@keyframes slideInRight {\n from {\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n visibility: visible;\n }\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}<\/pre>\n\n\n\n.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}<\/pre>\n\n\n\nStep 3: Upload Your animate.css<\/em> File to Your Site<\/h3>\n\n\n\n
Step 4: Call the Animate Stylesheet Via functions.php<\/em><\/h3>\n\n\n\n
add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' ); \nfunction wpb_animate_styles() {\n wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '\/css\/animate.css', '3.5.0', 'all');\n}<\/pre>\n\n\n\nStep 5: Apply Animations in WordPress Using CSS Classes<\/h3>\n\n\n\n
<\/p>\n\n\n\nKeep Your CSS Animations in WordPress Looking Great With WP Engine<\/h2>\n\n\n\n