Preface

Although it is very satisfying to add an animation to any UI, it is seen an unnecessary effort by many to have one. Besides, it is not really fun to work on implementing one in web platform. In this series, let's explore the options provided by the platform and see what we can do to enrich the applications and satisfy our souls as developers.

The main plan is to explain the animation landscape showing different techniques and to code a component where we are going to apply the techniques we learn. Unfortunately there are lots of pitfalls to avoid and lots of tips and tricks required to create a performant execution. Hopefully, we will reveal some and create a general awareness on performance.

What's really possible?

CSS Transition

CSS Transition is most straigtforward way to achieve animation in browser using purely CSS. The mechanism allows user to define an initial state and an end state. The rest is handled automatically by the browser and the transition between the state values interpolated within the specified animation duration.

Simplified syntax for CSS transition is given below:

transition: transition-property transition-duration transition-time-function;

Here is an example:

.title {
  background: blue;
  transition: background 1s linear;
}

.title.active {
  background: green;
}

For the example given above, the only thing it is needed to trigger the seamless background change within a second is adding a new class called active to any element with class title.

Time (Easing) Functions

An easing function is a function describes the value of a property given a percentage of completeness.

There are 7 easing functions predefined:

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• step-start
• step-stop

Click the elements below to trigger animation on all items with different easing functions:

Bezier Curves

On top of that it is possible the create a unique behaviour using bezier curves. Bezier curve is a parametric curve that allows to model smooth curves which can scale indefinitely.^{1 (Wiki footnote)} To define a curve you need at least 2 anchor points represented in x,y coordinates.

Here is a simple syntax breakdown:

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

You can play around with coordinate values, and you can decide which values you can use. However, this is not intuitive, there are superior techniques in terms of feel and genuineness which will be discussed in later sections.

Keyframe Animations

Keyframe animations let you define intermediate states of the animation and interpolates the values between those stages. Keyframes can be seen as a timeline of a process where a state is given for specific moments in that timeline.

A keyframe definition is given below:

@keyframes slidein {
  0% {
    transform: translate(0%);
  }

  100% {
    transform: translate(100%);
  }
}

And to apply an animation for an element using that keyframe definition we use the animation property.

animation: 1s linear slidein;

Using keyframes, it is possible to share different animation behaviours between components.

Another benefit is that it allows you to control more granularly than an animation uses a bezier curve.

In the second part, we'll look beyond what we can do with css, and we'll explore the capabilities that JS offer over CSS.