CSS Transitions

When we give a :hover pseudo-state to an element and then bring the mouse pointer over it, by default it changes styles instantly; for example as illustrated below, on mouse over the button changes its background-color in the blink of an eye.

No Transitions

Such types of changes don't always feel that elegant and smooth. Wouldn't it be amazing to smoothly and slowly change the styles!

Yes it would definitely be amazing and this is just where CSS transitions and animations step in. For this whole unit we will only be considering the former.

So in simple terms,

Note the fact that we have emphasised the terms "change" and "smooth" twice over here. Transitions can only be applied at the changes of styles. These changes can occur in pseudo states, CSS class additions or removals or by the addition or removal of CSS styles using JavaScript. Furthermore "smooth" implies that the change is done slowly over a given amount of changes, not instantly.

With CSS Transitions

And as you hover over this button, you get the idea of what does a transition do. Doesn't it look good?

Now this was just a simple demonstration of a CSS transition in action. Things get interesting when we look over how it works at the back end, but first let's consider some key terms commonly used in this topic.

States

Being very techy and defining what is a state, it essentially represents the styles of an element at a certain instance of time. In transitions, we have two significant states of an element:

1. Initial state: denotes the initial styles of an element from where a transition begins.
2. Final state: denotes the final styles of an element at where a transition ends.

Taking the example of the above button it looks like the following in its these two states.

With CSS Transitions (initial state)

With CSS Transitions (final state)

We will need this "state concept" when looking at timing functions in this unit.

Time Duration

A CSS transition works on time durations i.e the initial and final states are changed over a given amount of time.

When we will move over to the Transition Timing Functions chapter, we will see how exactly does a transition change from the initial state to the final one with value increments made relative to the slope of the function... We'll see this later.

Animatable properties

CSS transitions as well as animations, only apply to certain properties known as animatable properties. Examples of animatable properties include transform, opacity etc whereas for the non-animatable ones - display, font-family.

Non-animatable just means that changing the property's value won't be of any difference in a transition or an animation.

Moving on, in the coming chapters we will specifically look over transitions in actual examples and the key concepts related to them. We will even explore transition timings, delays, animatable properties, transition timing functions and much more.

Once you get the hang of CSS transitions which is fairly very very easy, learning animations won't be much of a hard work which will be the next unit after this one!