How to Easily Add Animations to Your Website

PaperStreet makes frequent use of animations on homepages we build, and it’s easy to see why. Animation brings movement, life, and a sense of polish to your website, creating a presentation static websites simply cannot achieve.

The best part is that adding animation to your website doesn’t have to be difficult. Here, we will learn how to implement animations in two different and surprisingly simple ways. We will start with CSS transitions and then briefly cover the use of a popular library called Animate.css. Let’s get moving!

Animating with CSS3 Transitions

CSS3, the latest web styling standard, added a feature called transitions. W3Schools states that transitions allow you to “change property values smoothly (from one value to another), over a given duration.” Simply put, transitions allow you to change (just about) any CSS value over time. Want to change a background color, font size, or opacity gradually? Transitions, transitions, transitions. Here’s how to use them.

See the wonderful box below? Try hovering your mouse over it and note the gradual change in its background color.

Hover me!

The box’s HTML is set up like this:

<div class="wonderful-box">
  <p>Hover me!</p>
</div>

To define the background color transition, we need to do two things:

  1. Tell the box that its background property should use a transition and change over time.
  2. Implement something to change the box’s background color – in this case, a hover state.

Step #1 can be achieved with the line of code below, which effectively says “if this element’s background property changes, then it will change over 200 milliseconds (0.2 seconds) rather than suddenly.

.wonderful-box {
 transition: background 200ms;
}

Notice we use the “background” property as the specific property that will transition. You can also use the word “all” in its place which will make all properties of the element transition, rather than just the background property. However, overuse of “all” transitions can be a performance hog, so it’s really best kept to development and testing only.

Something else to consider is animation timing. We can set an easing property on the transition so that instead of changing linearly over time, it might start slow, end slow, or some combination thereof. An “ease-in,” applied below, means it will start slowly and then gently accelerate to a finish. You can also use ease-out, ease-in-out, or, really, any variation of curves, for the more nuanced (see easings.net). Our code now looks like this:

.wonderful-box {
 transition: background 200ms ease-in;
}

Until CSS3 is widely adopted – and actually, it already is, but let’s play it safe – it is wise to set up transitions with browser-specific codes. So, you can essentially copy your transition multiple times as set up below in a way that can be interpreted by a variety of browsers.

.wonderful-box {
 -webkit-transition: background 200ms ease-in;
 -moz-transition: background 200ms ease-in;
 -ms-transition: background 200ms ease-in;
 -o-transition: background 200ms ease-in;
 transition: background 200ms ease-in;
}

The transition is set up! Now we need something to trigger the change in the box’s background. As mentioned before, we will set this change to occur on hover in CSS like so:

.wonderful-box:hover {
 background: #E28523;
}

The complete CSS code looks like this:

.wonderful-box {
 background: #eee;
 border: 1px solid #000;
 display: inline-block;
 padding: 10px 20px;
 margin: 20px 0;
 -webkit-transition: background 200ms ease-in;
 -moz-transition: background 200ms ease-in;
 -ms-transition: background 200ms ease-in;
 -o-transition: background 200ms ease-in;
 transition: background 200ms ease-in;
}
.wonderful-box:hover {
 background: #E28523;
}

As you can see, transitions make things just a little more beautiful, and they are painless to set up. Want to try something new? Try using transitions on opacity properties to make things fade in and out, or apply them on other CSS3 effects like a box-shadow to get a little crazy.

Animating with Animate.css

Animate.css is a CSS library that provides complex animations in a convenient package. To see what its animations are capable of, check out the website.

Just how quick is it to implement Animate.css? You may be surprised.

First, download the package from the website and paste its CSS code into your stylesheet. Preferably, this code will be added to the top of your stylesheet in a minified (compressed) form.

All that’s left is to apply an Animate.css class to an element on your page. Any element to be animated must include the “animated” class. After that, you can choose which animation to use by specifying a second class. In this case the animation we are calling is “slideInLeft,” but there are dozens to pick from. Your HTML should look like this:

 <div class="animated slideInLeft">
  <p>This text will slide in from the left when the page loads!</p>
 </div>

Refresh your page, and you might just see the text slide in! Cool, huh?

I hope that this guide provides a launch point for you to begin exploring all that can be done with transitions and Animate.css. Have fun!

Related Articles in Coding, Web Site Design,

PaperStreet: Our Services & Portfolio


Leave a Reply

Your email address will not be published. Required fields are marked *

*