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, or the website of AllSpine Surgery Center, 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

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;
}

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.

If you still hesitate on how to use all this properties, html and css then you may get help from proffessionals. An IT Managed Service & Cybersecurity partner who will do what's right for your business.