Using CSS3 Transitions for Smooth Animations (2024)

Este artículo en español

CSS3 provides a way to create transitions between states with really smooth animations. When we want to modify the style of any element, usually changes are applied instantly. With transitions, this behavior is modifiable, allowing us to easily set not only how long does it takes to change but also the way it does with some simple directives. This customization will give us the possibility to change the look and feel of our applications by just including these easy to create transitions instead of inefficient JavaScript animations.

CSS3 transitions are not fully supported in every desktop browser (IE9 and earlier), but all of the main mobile browsers support it. Therefore, they are a great ally to combine with our Onsen UI modern interfaces to make them feel even better. In this post we will review how CSS3 transitions work and make a simple example to animate Onsen UI’s Pull Hook, so every time we try to update the element it will show a loading animation similar to Twitter’s.

CSS3 transitions work similarly to a finite state machine: the element is in only one state at a time, and it can change from one state to another when some event (hovers, clicks, custom ones, etc.) is triggered. With CSS3 we can specify how an element changes by just describing its current and target states. CSS3 will create a smooth transition between these states by applying a cubic Bézier curve and gradually change the element appearance. The good thing is that we don’t need to deal with any mathematic function (although we can specify parameters to customize the transition), just describe the origin and the expected result.

The way to proceed is the following. For every state, we specify three basic parameters: the CSS properties affected by the transition (width, height, color…); the duration of the actual transition in seconds; the Bézier curve we want to apply. It is also possible to modify the transition delay, but mostly we will want to have 0ms delay, so we can often omit it. For a complete list of modifiable properties and other information, you can have a look at Mozilla Developers Docs. For the Bézier curve selection, you can choose among “ease”, “linear”, “ease-in”, “ease-out” and “ease-in-out” (also explained in the previous link), or you can specify your own parameters with cubic-bezier(x1, y1, x2, y2). You can have a look at Cubic Bézier Curve to see how it changes depending on the parameters.

And, finally, some examples! Hover over this code to see a demonstration:

#example { transition: all 0.3s ease-in-out; transform: rotate3d(0,0,0,0deg); }
#example:hover { transform: rotate3d(0,1,0,180deg); }

Pretty cool, isn’t it?

However, since some of the CSS3 are still under testing and are not fully supported by all browser, it is advisable to add the corresponding prefixes (-webkit-, -moz-, -o-) to every function depending on the browser where the transitions will be displayed. You have more information about it here. An example would be like this:

#myid { -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; }#myid { -webkit-transform: rotate3d(0,0,0,0deg); -moz-transform: rotate3d(0,0,0,0deg); -o-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }

Normal CSS properties (such as color, font-size, etc.) don’t need these prefixes, only the transition-related functionalities. When CSS3 transitions are totally supported, these prefixes won’t be necessary anymore, so if you want to support only modern browsers you can omit the prefixes.

We are animating here a Pull Hook in order to make it looks like Twitter. Let’s see a live example first:

To begin with the explanation, we need to include the actual HTML code of Pull Hook in our application:

Internally, Pull Hook has three distinct states which can be accessed using CSS property selectors. These states are the default one, “initial”, when Pull Hook is idle; “preaction”, when the element is being dragged around; and “action”, when it is dropped and starts performing its programmed functionality. As you can see in the previous code, we have included a couple of icons to make it fancy, and now we will transform these icons depending on the state.

• State “initial” (this state also includes the early dragging, since it is not considered “preaction” yet):

• State “preaction” (while dragging it):

• State “action” (when we stop dragging and drop it):

And, of course, when the “action” state is over it will change to “initial” status again, and CSS3 will restore its appearance to the original one using the transition we described in the idle status.

CSS3 transitions are a really interesting tool to consider for creating smooth animations. They are much lighter and more efficient than JavaScript animations, so we can speed up our interfaces with them. There are plenty of CSS3 transitions examples already out there, check it out on Google and you will be surprised about the fancy stuff you can do with them!