Practical guide: animate user interface with CSS transition

Practical guide: animate user interface with CSS transition

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.

Actually, this CSS property has 4 attributes:

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

.element { <transition-property> <transition-duration> <transition-timing-function> <transition-delay> }

Transition-property

Here you may specify one of the properties that has to be changed with animation, e.g. background.

Transition-duration

is normaly used to set a duration for transition effect. Value should be defined in seconds (s) or milliseconds (ms).

Transition-timing-function

defines the speed curve of the transition effect ( ease, ease-out, ease-in and ets.). Default value: ease.

Transition-delay

define this attribute if you need to set a delay before the transition effect.

Note

For a proper work of transition in all major browsers you would better use prefixes:

.for-example {
	-webkit-transition: background-color 0.5s ease;
	-moz-transition: background-color 0.5s ease;
	-o-transition: background-color 0.5s ease;
	transition: background-color 0.5s ease;
}
Is There Any Limitations For CSS Transition?

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.

Leave a Reply