A Comprehensive Guide To Advanced CSS Animations

Overview

Web design has undergone a number of innovations over the years, with each new implementation bringing a unique “flavor” to their coding.

Web animation has been dominating our screens in recent years, raising the bar for more intuitive and exciting user experiences online. Website design animation turns an ordinary user experience into an unforgettable journey that amazes with its bold colors, movements, adventures, and exciting interactions.?

In Alec McGovern’s Lightning Talk session, we will be uncovering the following animation topics:

• What Is Animation?
• Timing Functions
• Test Your Skills
• Closing Thoughts

What Is Animation?

Animation is all about breathing life into your web page. It can be anything from a simple button hover to a more complex customized menu slide - an animation serves a primary purpose in making your application readable, user friendly, and overall… FUN! Animations work to engage your users in a tangible way, meanwhile drawing attention and focus.

The two most commonly used CSS (Cascading Style Sheets) for animation are:

Transitions

Transitions are the simplest way to animate a DOM (Document Object Model) element - or in other words, the determined page contents and its associated elements. They allow you to make a smooth consistent change to page elements over a specific duration of time.?

The primary components to a successful transition animation rule are:

• transition-property

A transition-property will specifically denote what CSS element you’ll be specifically changing (examples include: color, opacity, etc.)

• transition-duration

A transition-duration will specifically denote the allotted time the animation should take to complete before looping.

• transition-delay

A transition-delay will specifically denote how long the animation should wait (in-between period) before looping the animation over again.?

• transition-timing-function

A transition-timing-function will specifically denote how “fast” the visual animation should move on the web browser when a user engages with it.?

Example: The below transition code utilizes the property and duration formulas used to show that changes in opacity (transparency) should span a duration of two seconds before disappearing completely.

@keyframes

For more complex animated changes over time, @keyframes, a specialized CSS rule, needs to be utilized. @keyframes allow a larger string of properties to be changed within a singular animated sequence.?

Example: The below @keyframes codes utilize the more complex from→to animation types (fadeout), as well as a percentage formula of exact color transitions throughout each animation duration point.

Once you’ve defined your @keyframes elements, you’ll be able to directly code them into your DOM, as shown below:

With both these animation formulas in mind, you’ll not only have a basic understanding of the coding associated but will also be able to implement either CSS code to execute the following tenets of animated web elements.?

What Are Time Functions??

A time function controls the speed that your animation occurs at. The most commonly used value is, ease: which starts slow, accelerates in the middle, and slows again as the animation loop comes to an end.?

Some other examples include:

• linear
• ease-in, ease-out
• step (int, start│end)
• cubic-bezier (n,n,n,n)

Test Your Skills

You’ve unpacked quite a few animation principles – think you’re up to trying your hand at some practical animation exercises?

Alec McGovern has created an individual testing space just for you!

To rise to the challenge and apply what you’ve learned to the following animation exercise, click here.?

Closing Thoughts

All animations should always be designed with performance and the user experience in mind. The properties explored above are the primary stepping stones to experimenting with the basic components needed to test how animation can improve your personal web application. Be sure to explore, have fun, and match up the components that work best for your project!

Happy coding!

To learn more about the introduction of animation coding in web development and to experience Alec McGovern’s full Lightning Talk session, watch here.

This article was originally published as a part of the Learning and Growth series on the InRhythm blog.?

This newsletter was curated by Kaela Coppinger . Thoughts or questions? Sound off in the comments section below.