The easy way to add animations to your website [Animate.css]

Adding subtle animations to your website is a great way to keep visitors engaged with your content.

Just like in PowerPoint or Keynote, animations can be used to focus visitors attention on what’s important.

Unfortunately, for most website owners, adding animations isn’t as easy as selecting them from a dropdown menu.

In this article, we’ll walk you through the easiest ways to add popular animations to your website.

Note: because websites are built on various platforms that handle code differently, we’ll introduce the most universal approach using Animate.css and then explain a simple alternative using Pagecloud, where no code is required.

What are CSS animations?

As you may or may not know, CSS stands for Cascading Style Sheets. CSS is used by Web browsers to determine how the HTML elements on your page are displayed.

CSS animations enable your content to visually transition from one style configuration to another. For beginners that lack experience writing code, this can be pretty intimidating.

Here’s a simplified example where text moves across the page using HTML and CSS:

Hello!

When you read the CSS, you can see:

• Total duration of the animation is 8 seconds (line 2).
• Animation being used is “slidein” (line 3).
• Animation is on an infinite loop (line 4).
• “Slidein” begins on the left hand side of the page (line 9).
• At half the duration, the title is 300px off the left side of the page (line 12).
• At the end of the animation, the text is back on the left hand side of the page (line 15).

If you’d like to try writing some CSS, you can modify the example above using CodePen.

As you explore CSS animations, you will discover dozens of properties that will enable you to customize your transitions so they work seamlessly within your design.

On the other hand, if you want to save time by using pre-built animations, you will want to use Animate.css.

What is Animate.css?

Animate.css is a cross-browser library of CSS animations created by Daniel Eden. As of 2019, the library contains 77 pre-built animations enabling you to quickly animate the content on your website.

Here’s an example of the code written by Daniel Eden for a “SlideInLeft” animation found within the stylesheet:

By using this library, you can avoid spending hours writing and fine tuning simple animations. The best part? The library is open source and free to use!

How to use Animate.css in standard web development

Step 1. Install or upload the Animate.css stylesheet to your file manager. This will vary based on the platform you use. Alternatively, you can use the Content Delivery Network (CDN) version to avoid uploading files to your web server.

Step 2. Link the Animate.css stylesheet in the of your web page(s) or template. Eg:

Step 3. Add the proper class name to your element

You must include “animated” before the name of the animation. You can also include the class “infinite” in order for your animation to loop indefinitely. 

For example: 

Once you get comfortable with CSS, you can modify any of the properties found in the stylesheet to match your own unique preferences.

If you want a specific element to be different than the default animation, you can add modifiers to change properties such as the duration, the delay or the number of times an animation will play:

For example:

And that’s it!

By following the steps above, you can add animations to any element on any website where you have access to the source code.

To learn more about custom CSS animations and what can be done with Javascript, we’d recommend taking a look w3schools and GitHub.

However, if web development isn’t your forte, there are simpler alternatives like Pagecloud where you don’t need to deal with the code at all.

We’d definitely recommend giving it a try if you’re new to building websites. 

Method 1

Step 1 - Download the Animate.css file from here;
Step 2 - Login to PageCloud and open up the page you want to edit;
Step 3 - Drag and drop the “Animate.css” file you downloaded on to your page;
Step 4 - Select the element you want to animate and click on “ADVANCED” in the editing menu;
Step 5 - Add “animated” + the name of the desired animation (eg. animated bounce);
Step 6 - Save and view your live website.

Method 2

Step 1 - Login to Pagecloud and open up the page you want to edit;
Step 2 - Drag the “On scroll animation file” on to your page;
Step 3 - Select the element you want to animate and click on “ADVANCED” in the editing menu;
Step 4 - Add the name of the desired animation to the class field;
Step 5 - Save and view your live website.

And voila! You’re done.

Pro tip: Clever use of animations can elevate just about any design. However, too many animations can be distracting and turn off potential customers. When in doubt, less is more. If you want to get really good at animations, we’d recommend checking out the Animation Handbook.

Summary

Regardless of your experience with CSS, following the instructions in this article will give you the ability to add stunning animations to any website.

However, animations are just one of the many CSS properties used by websites in order to display stunning content. Just about every element on your website will need some CSS in order to look right: text, backgrounds, images, videos...

If you don’t want to spend days learning or fiddling with code, we’d recommend trying a website builder like Pagecloud that offers a user-friendly interface enabling you to animate and customize the look of your site without writing a single line of code.

Best of all, Pagecloud offers a world-class support team that will be happy to answer any of your questions, create your free website today!