Practical guide: animate user interface with CSS transition

Markup Hints | January 07, 2016

What Is CSS Transition?

Transition property is a cool css property that allows you to add animated effects to your pages without using JavaScript. Settings transition property for an element you may specify duration and property which will be changed during a specific time. So this change (color, background or borders) will happen smoothly.

The most illustrative example is our theme Origami, have a look at the main menu. If you hover over the items the background color smoothly changes to green.

In general, CSS transition has a discrete value which changes between two states. Usually, it is applied to some of the layout properties such as width, height, margins, borders, padding, positional properties, transformations, font sizes, colors and so on.

But there are some css properties for which browser can't determine the in-between states. For instance, "display", "visibility", auto value for "width" value does not have discrete values.

CSS Transition VS. JavaScript Animation

Transition is much easier way to get a smooth change of your css properties. This variant has some restrictions but the only problem you may get when writing a css code - your code won't be applied, that's all that can happen.

JavaScript capabilities are much wider. However, javascript code increases your page load time and requires some knowledge of this programming language from you. If "end justifies the means" use JavaScript, but I think that if you may save your time using only CSS that's great.