• Skip to main content
  • Skip to footer

InRhythm

Your partners in accelerated digital transformation

  • Who We Are
  • Our Work
  • Practices & Products
  • Learning & Growth
  • Culture & Careers
  • Blog
  • Contact Us

Jul 28 2022

An Introduction To Web Animation

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:

  1. 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.

  1. @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. 

Written by Kaela Coppinger · Categorized: Code Lounge, InRhythmU, Web Engineering · Tagged: best practices, INRHYTHMU, JavaScript, learning and growth, web engineering

Reader Interactions

Leave a Reply Cancel reply

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

Footer

Interested in learning more?
Connect with Us
InRhythm

110 William St
Suite 2601
New York, NY 10038

1 800 683 7813
get@inrhythm.com

Copyright © 2023 · InRhythm on Genesis Framework · WordPress · Log in

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT