How to Make Cool CSS Animations to WordPress

You can add some animations to the webpages to make them attractive and interesting to look at. JavaScript or Flash to generate animations will however eat up a lot of the resources on your site.

Luckily, Cascading Style Sheets (CSS) can be used to add animations to your WordPress site. This coding language is also quite affordable and easy to learn and allows you to add as many animations as you desire to your site using it.

This article will discuss the working of CSS animations and the use of a CSS animation property on your site with and without a CSS animation plugin. Let’s go!

CSS WordPress Animations: What are they? (And Why You Should Use Them)

CSS3 allows users to create animations by changing the look of an item (like a button or an image) in a gradual manner. You can make as many changes to the CSS properties of the element as you wish and as frequently as you wish.

Unlike Flash or Javascript animations, CSS animations do not have any issues with browser compatibility or the complexity of the scripts. This will enable you to bring out important features without having to undergo undesirable side effects such as reduced performance.

CSS Animations in WordPress Added with a Plugin

In case you do not have the confidence in your coding abilities, we will take care of it. Rather, you can just use a plug-in to create CSS animations.

Step 1: Add and enable a CSS Plugin of Animation

You will have to install a CSS animation plug-in to start with. We are also using a fairly recent application that specifically works with the Block Editor known as Blocks Animation: CSS Animations for Gutenberg Blocks.

You can find this plugin in Plugins in your WordPress dashboard under Add New. After finding it, click on Install now and then Activate:

After the activation process is completed, go to the page or the post where you want to place your basic animation.

Step 2: CSS Animation Designing in WordPress

The desired element is then clicked. Find the Block tab of the sidebar Animation. This is the place that we selected in Step 1 when we turned on the plugin. Here, a drop-down menu showing a number of effects is shown:

You can experiment with as many possibilities as you would like to determine which animation fits best with your material.

Step 3: Adjust Speed and Delay

Besides, there is also the timing option in the Blocks Animation plug which enables you to change the speed and delay of the animation:

This animation commences later when one of these two options is chosen. Once the page has loaded, this may aid in bringing your piece to the forefront or you may mix animations as we will demonstrate later on. The maximum delay of animation is five seconds.

The drop-down menu can be used to choose the pace of your animation Slow, Slower, Fast, or Faster. The animation should be quicker to attract more attention of the visitors, but the slower one may be less obtrusive and shocking.

Step 4: Save and Preview your Animation with WordPress

To save your site or post as a draft and test your animated element, we recommend that you save it before publishing. When using a variety of CSS animation on a single page, make sure to save the animation name property as well. In as much as animations may be very useful, they may be annoying and cause clutter to your pages.

These undesirable outcomes can be prevented by previewing your page and fairly modest animations. The final result of our CSS animation, a combination of an animated image and the button that we made in the previous steps, is shown below:

You can always return to the Block Editor and make the required changes in case you find that your animation does not fit well with the rest of your work or is creating the right effect. The benefit of it is that it is fast and easy to use a CSS animation plugin.

Adding CSS Animations in WordPress Without a Plugin

You can also create unique animations manually without a plugin in case you are comfortable with modifying the files in your theme. The coding know-how is a bit required so this solution can be best left in the hands of those who have experience in development.

Always remember to make a backup of your site. It is also a good idea to use a child theme since it will be easy to revert to default files of your theme in case of need.

Step 1: Understand the CSS Properties Involved

There are eight properties that you should take into account when it comes to making CSS animations before you start making any change:

@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 features to understand is the so-called keyframe, which was named so because of the hand-drawn animation techniques where the keyframe was the central frame and the rest were made 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;}

}

As indicated in the keyframe above, the background color of the given element will shift to yellow 25 percent of the animation time. The timing of the animation is normally stated in percentages. Conversely, 0 percent and 1 hundred percent can be replaced by from and to respectively.

Step 2: Create Your animate.css File

Before you can apply CSS animations you need to use the properties listed above to create a file in your preferred text editor. There should be keyframes of any animation you want to use. You will then then attach them to specific CSS classes in order to apply them to the things on your web site.

Here’s an illustration. In order to move something in on the right of the screen, we create a CSS keyframe animation by initially using the transform property and the visibility property on the code below:

@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 may repeat this to make as many animations as you want. After that save the file as animate.css. The other option is to download the famous Animate.css file. It makes you not need to write complex animation code to give the keyframes and CSS classes of dozens of popular animations.

Step 3: Upload Your animate.css File to Your Site

The animate.css file that you had completed should be uploaded in the directory of your theme. To achieve this, use File transfer protocol (FTP) and an FTP client such as the file zilla. The necessary information on the logins is found in your hosting account.

In order to find the folder of your active theme (or child theme), you should access wp-content > themes after accessing your publichtml directory:

Find the sub directory of the css. In case there is an animate.css file (or animate.mini.css file of Animate.css), upload it there. You may also create a new sub folder and name it accordingly in case you do not already have such a folder:

Do not leave your FTP client as soon as your file has been uploaded successfully. In order to use this stylesheet on your WordPress site, you will be required to make some changes to the files.

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’);

}

Remember that you should enter animate.min.css in the last line and not animate.css when you uploaded animate.min.css file of Animate.css.

This will enable you to use the classes in the stylesheet in items on your site by making your theme invoke the stylesheet that you have just uploaded. After saving your changes, go back to your dashboard in WordPress.

Step 5: Apply Animations in WordPress Using CSS Classes

Now you can use any of the classes of your animate.css file to your posts and pages. With the reference to animate.css, you can refer to a comprehensive list of all that the file contains on GitHub in case you are using it.

Click on the page or post where the element you are going to animate is found. Go to text editor under the Classic Editor. To edit in HTML, select the three-dot button in the block toolbar and select Edit as HTML:

Then give the class of your animation and the animated class in the element tag:

Finally, preview your page or post. Now your animation should work:

It is a process that can be edited to add any animation to your animate.css file.

How to Optimize CSS Animations for Core Web Vitals

These are the best practices that can ensure that CSS animations do not affect the functionality and speed of your WordPress site:

Tip 1: Optimize animation properties

To ensure that CSS animations do not slow down your WordPress site:

1. Lightweight properties such as the use of scale, transform, and the use of the property of opacity are needed to make animations smooth and effective. These properties do not allow reflow and repaint.
2. Remember that such heavy attributes as width, height, top, left, margin, and padding may trigger recalculations of the layout, which may make your site load slower.

With these minor tweaks, it is possible to keep animations running and with a few captivating visual effects.

Tip 2: Stay away from continuous animations

Limit the use of animations to required elements, e.g. headers or call-to-action buttons, to avoid putting an undue burden on the CPU or the graphics card of the device. Also, it is better not to use continuous animations because it may slow down the performance and consume more CPU resources because of loops or infinite effects.

Tip 3: Optimize with the will-change property for better LCP

By preparing the change, the addition of will-change: transform to the animated elements can help the browsers to optimize the rendering. It should not be used too often to avoid saturation of memories.

Tip 4: Minimize animation duration

Long transitions should be avoided and should not make the page take too long to load and the animations should not exceed 500 ms.

Tip 5: Defer animations until after page load

Optimize Core Web Vitals with animation delay to delay the loading of the animations until the page is loaded, to ensure that important content is loaded instantly. Also, when possible, make use of lazy load animations, which only begin when the visitors visit the right sections.

Tip 6: Use Long Animation Frame to improve INP

A website should be able to switch its content quickly in order to appear fluid and fast. When many CPU-intensive tasks are performed, the primary thread of the browser is blocked and will slow down the rendering process and generate long animation frames.

Tip 7: Utilize the prefers-reduced-motion media Query

To turn off or simplify animations, use the value decrease to reduce motion of users who want to have less motion. To such users, this improves performance and at the same time improves accessibility.

Now, we can discuss some of the mistakes to which people can fall when using CSS animations in WordPress.

Mistakes to Avoid When Adding CSS Animations in WordPress

When implementing CSS animations in WordPress websites, the website owners need to know the inevitable and common mistakes that negatively impact SEO, user experience, and performance.

Mistake 1: Overusing animations

including too many animations on a single page or on the entire site. Excessive animations on a site may overwhelm the site visitors, distract them and increase the page load time.

How to prevent it

Animations should be applied selectively and sparingly to calls-to-action, buttons, and graphics to attract attention to important places without overwhelming the user.

Mistake 2: Using non-optimized CSS animations

animate attributes (width, height, margin, etc.) which trigger layout reflows or repaints. Animations on properties that require the browser to re-calculate the layout can be a negative influence on the user experience.

How to prevent it

Stop layout recalculations, use animating attributes that are accelerated by the graphics card such as transform and opacity.

Mistake 3: Not testing animation performance

Adding animations without considering their effect on the performance and speed of the site. Even minor animations can have a negative impact on such Core Web Vitals as Largest Contentful Paint (LCP) by decreasing the page loads and delaying the visual content display.

How to prevent it

To ensure that animations do not significantly slow down your site, check its speed with the help of such programs as Google PageSpeed Insights, GTMetrix, or Lighthouse, after adding animations.

Mistake 4: Not considering mobile optimization

implementing desktop-oriented animations, which do not work well on mobile devices. In case the animations are not responsive, mobile consumers will experience the experience as unpleasant or slow, which will raise the bounce rates.

How to prevent it

You can ensure your animations are mobile friendly by testing them on different screen sizes and using media queries to disable or reduce the complexity of animations on smaller screens.

Mistake 5: Ignoring accessibility

apply fast or continuous animations without considering the possible impact on motion sensitive or the visually impaired. The poor user experience may be caused by the fact that some users may find the fast or blinding animations irritating or even harmful.

How to prevent it

Provide consumers with the option to disable animations using the prefers-reduced-motion media query and avoid overly fast or overly fast animations.

@media (prefers-reduced-motion: reduce) {

.animated-element {

animation: none;

}

}

Mistake 6: Using heavy animation libraries unnecessarily

JavaScript libraries such as GreenSock (GSAP) are loaded when simple animations need to be done or huge animation libraries such as Animate.css are loaded. These libraries can slow down load times because their unnecessary inclusion of weight to the CSS and JavaScript files on your site adds weight to them.

How to prevent it

Although you might need complex animations in your site, you should write your own lightweight CSS code to do your animations instead of relying on huge libraries.

Mistake 7: Forgetting to minify CSS

Adding unminified or uncompressed CSS files to the site. Unminified CSS can slow down your page loading and add to the number of kilobytes on your site.

How to prevent it

CSS files are always supposed to be minified in order to reduce the size of the files. CSS optimization and minification may be facilitated by the use of the plugins like NitroPack.

Mistake 8: Using animations that distract from content

Creating animations that prevent user interaction or distract attention away on the main content. Long and poorly timed animations may distract important content, which will annoy users and decrease conversions.

How to prevent it

Ensure that animations enhance the user experience and they are beneficial. They should not distract the users; on the contrary, they should help them navigate the content.

Mistake 9: Not accounting for browser compatibility

failing to ensure that your animations work with all the major browsers including the older ones. Some of the animations may not appear in specific browsers, and this may lead to inconsistent user experiences.

How to prevent it

Test your CSS animations across different browsers and use vendor prefixes (e.g., -webkit, -moz) when necessary to ensure compatibility.

.element {

-webkit-animation: fadeIn ls ease-in;

-moz-animation: fadeIn 1s ease-in; animation: fadeIn 1s ease-in;

}

Mistake 10: Ignoring page load prioritization

Important material can be postponed in presentation when the elements above the fold (which are visible when loading the first page) are animated. Page speed also plays a significant role in search engine ranking, and page animation of above-the-fold content can slow the speed at which a page loads, which is not good in search engine optimization.

How to prevent it

Think about using lazy loading techniques of off-screen animations and only doing animations on non-essential or below-the-fold items.

CSS animations are able to enhance the visual effects and interaction of your WordPress site even though they need to be used sparingly. These are some of the common pitfalls that can be avoided to create a fast and easy to navigate site besides being appealing to the eye.