All about CSS transitions

Without animations, UI looks incomplete. Even a small tweak makes the user experience much better. We can add animations in two main ways in our UI, first is keyframes and the second one is transitions. Although there are many ways and these two are used quite often.

What is the difference between keyframes and transitions?

Transitions can’t change CSS properties. You set the property values on a selector and perhaps the selector’s :hover state. The transition defines how the change occurs, but not the specific start and end values.

Animations, on the other hand, can change property values inside their keyframes. The property values don’t even need to exist outside of the animation keyframes. This makes animation far more dynamic and flexible than transitions.

https://developer.mozilla.org/files/4529/TransitionsPrinciple.png

Transitions make it easy to add animations because we do not need to calculate or define animation from start to finish it’s calculates automatically.

How to Use CSS Transitions?

To create a transition effect, you must specify two things:

• The CSS property you want to add an effect to
• The duration of the effect

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

Let’s see it in action

In the above example, the transitions property has three values first is the CSS property you want to add an effect to, you can use all if don’t want to specify, second the duration of the effect and third is transition-timing-function

The transition-timing-function the property specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

• ease - specifies a transition effect with a slow start, then fast, then end slowly (this is the default)
• linear - specifies a transition effect with the same speed from start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow start and end
• cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

You can also define these different transition properties separately

• transition — A shorthand property for setting the four transition properties into a single property
• transition-delay — Specifies a delay (in seconds) for the transition effect
• transition-duration — Specifies how many seconds or milliseconds a transition effect takes to complete
• transition-property — Specifies the name of the CSS property the transition effect is for
• transition-timing-function — Specifies the speed curve of the transition effect

Here are some basic to advanced transition examples:

that’s it guys now go ahead and practice some of these examples and try to implement it your self. The more you practice, the better you design ✌