CSS and Motion — You Too Can Build Animations on The Web

Who doesn't love animations? More than anything, they make your webpage feel alive. I could take you down memory lane on how the concept of motion captured my heart, but let's talk about you. You build stunning user interfaces, and you know that adding motion to your projects would give them some sort of elegance. Hence, that missing piece has to be filled — CSS and Motion is a short and effective guide sharing just enough fundamentals to help you start developing those buttery smooth animations on your web pages.

The Principles of Motion

Understanding the Principles of Motion is essential for any motion designer or developer; animations and transitions could be used carelessly on web pages, distracting the user rather than exciting them. As a rule of thumb, ensure your animation passes some information to the user before animating any element. Also, ensure that your animation keeps your user focused on what is necessary. A good instance to use animations is at the end of a user journey, i.e. completing a milestone — this makes your animation expressive.

For some depth on motion design, see Understanding Motion.

Now that we know when motion should be used, we need to understand the two ways to apply motion in CSS — Transitions and Animations.

What are Transitions and Animations in CSS? When do I need to use one over the other?

Transitions

Transition is a motion between two keyframes; think of keyframes as a group of CSS styles, e.g. color: red, padding: 20px etc. The two keyframes of a transition would be individual styles for an element with similar CSS properties and different values — I know, that’s a lot to take in, but the diagram above helps to simplify.

Please note that the transition property in the codepen is a shorthand property, containing the transition-delay and transition-timing-function.

The code snippet above shows a simple CSS transition that steadily modifies the CSS color and padding properties from their initial state to the :hover state in one second (1s) — The CSS Transition is triggered by a hover action.

Transitions are triggered by pseudo-classes like :hover, :active, :focus but not limited to pseudo-classes. They can be added as bare styles while manipulating the DOM to activate the transition motion. A perfect example for this is exit and enter transitions.

/* NOTE: This code snippet inherits code from the codepen above */

.transition-box.enter {
  color: red;
  padding: 20px;
}

In the above code snippet, the transition is triggered when the enter class is added to the transition-box div element.

Animations

Transitions are perfect for demonstrating motion between two keyframes, but what happens when you work with more than two keyframes and need more flexibility in changing CSS properties? This is where animations build up on the shortcomings of CSS Transitions. CSS allows you to set animations with numerous keyframes in terms of percentages.

Recall that a keyframe is a group of CSS styles.

The code snippet above results to a slightly-complex CSS animation with four keyframes; 0%, 33%, 66% and 100%. Each of these keyframes have similar CSS properties and some of these properties have different values; The keyframes use percentages to represent the state of an element at a fraction of the given time, which is three seconds in this case

/* NOTE: This code snippet inherits code from the codepen above */
animation: cssnmotion 3s ease-in-out infinite;

With an understanding of what animations and transitions are, you would realise that most complex animations you have encountered in the past are just simple transitions — the developer has set up a construct that changes the value of CSS properties at a given interval.

I always recommend that animations are reserved for more complex motion designs and are seen as a last resort, as increased complexity can result in decreased performance of your webpage.

I hope you learnt a lot to kickstart your journey into CSS and Motion. Thank you for reading!