CSS Animations, Part 1

Tiffany White,
Back

As you may know, you can animate pretty much anything with JavaScript and jQuery. jQuery makes it easier as it is a pretty neat and simple JavaScript library. No need to use:

document.getElementByID

when you can use:

$(#myID).animate({
  left: '250px'
});

You can also animate things with CSS. There are debates on whether CSS animations are faster than JavaScript animations (opens in a new tab) and generally, if you are using vanilla JS and not a heavy library like jQuery, JavaScript animation perf is comparable to CSS.

So How Do You Animate with CSS?

There are basically two ways to animate properties in CSS: transition and transform.

Not all CSS properties are animatable. See this list (opens in a new tab) for animatable properties.

Animating a property with CSS is fairly straight-forward.

Take the animatable property: opacity. We can animate the opacity on an image overlay so that when we hover over it with the mouse, the opacity of the overlay will decrease on the image. You can do that with something like this:

.overlay {
	opacity: 0;
	transition-property: opacity;
	transition-duration: .4s;
}

.overlay:hover {
	opacity: 2;
}

Here, we are selecting the overlay class, and adding a base property to that class. Inside of the class selection, we set the opacity to 0 and add the transition with transition-property which selects the property you want to animate and transition-duration which tells the browser how long the animation lasts.

Once you hover over the image, the opacity will be set to 2, and when you switch off of it, it will go back down to 0 since we told the browser by the first CSS declaration we needed to have the opacity return to 0 once the hover state was over.

Not Too Bad, Right?

As you may know, you can animate pretty much anything with JavaScript and jQuery. jQuery makes it easier as it is a pretty neat and simple JavaScript library. No need to use:

document.getElementByID

when you can use:

$(#myID).animate({
  left: '250px'
});

You can also animate things with CSS. There are debates on whether CSS animations are faster than JavaScript animations (opens in a new tab) and generally, if you are using vanilla JS and not a heavy library like jQuery, JavaScript animation perf is comparable to CSS.

So How Do You Animate with CSS?

There are basically two ways to animate properties in CSS: transition and transform.

Not all CSS properties are animatable. See this list (opens in a new tab) for animatable properties.

Animating a property with CSS is fairly straight-forward.

Take the animatable property: opacity. We can animate the opacity on an image overlay so that when we hover over it with the mouse, the opacity of the overlay will decrease on the image. You can do that with something like this:

.overlay {
	opacity: 0;
	transition-property: opacity;
	transition-duration: .4s;
}

.overlay:hover {
	opacity: 2;
}

Here, we are selecting the overlay class, and adding a base property to that class. Inside of the class selection, we set the opacity to 0 and add the transition with transition-property which selects the property you want to animate and transition-duration which tells the browser how long the animation lasts.

Once you hover over the image, the opacity will be set to 2, and when you switch off of it, it will go back down to 0 since we told the browser by the first CSS declaration we needed to have the opacity return to 0 once the hover state was over.

Not Too Bad, Right?

It is fairly simple, once you get the hang of it. I will be posting more about CSS transitions as I learn them. Meanwhile, here is nice little table (opens in a new tab) of animatable properties by Lea Verou (opens in a new tab) that animate when you hover over them.

© tiff.RSS