Thread by @Prathkum

Introduction to CSS transitions ⏲️

CSS transition add some smoothness in animation. By using it, you can change styling over a given duration instead of instantly

Let's discuss this in a little more detail 🧵👇🏻

CSS transition and CSS animation are two closely related modules of CSS but they are different

For example, CSS animation runs automatically but the transition need to be triggered like hover

Transition is a like a two point operation. For example, suppose you're changing the height to an element when user hover it from 100px to 200px

In this case point A is 100px and point B is 200px

Learning CSS transition is not really difficult, you just need to learn four properties and that's it

transition-delay
transition-duration
transition-property
transition-timing-function

📌 transition-property

transition-property defines the name of CSS property/ies to which transition should be applied.

📌 transition-duration

Transition duration is nothing but the time period in which transition occurs.

Let's try to play around with these two properties 👇🏻

Consider this code snippet 🔽

div {
transition-property: height;
transition-duration: 2s;
}

div:hover {
height: 200px;
}

The output 👇🏻

Explanation:

Point A - height 100px
Point B - height 200px;

The div element changing its height from 100 to 200px in 2 seconds as mentioned in transition-duration property

Alright moving further, we can add multiple CSS properties in transition-property and multiple transition-duration as well using comma(,) separated values

div {
transition-property: height, width;
transition-duration: 2s 4s;
}

div:hover {
height: 200px;
width: 200px;
}

You can see height is changing is 2s and width in 4s as we have mentioned it respectively.

If in case there is only one value is transition-duration then it will applicable for all the properties mentioned in transition-property

📌 transition-delay

As the property name suggests, it defines how long to wait between the time a property is changed and the transition actually begins.

📌 transition-timing-function

The transition-timing-function property specifies the speed curve of the transition effect. Let's visualize it in next tweet

You can pass following values in transition-timing-function property

- ease (slow start, then fast, then slow)
- linear (same speed)
- ease-in (slow start)
- ease-out (slow end)
- ease-in-out (slow start and slow end)
- cubic-bezier (customizable)

You can visualize all the curves here on the link

🔗 codepen.io/prathkum/pen/Q…

Instead of using four diffrent transition property you can use only one CSS shorthand property called transition

And I think that's it for the CSS transition introduction, if you like this thread share it with you connectios, means a lot to me ❤️

I just launched a CSS notes books covering all my handwritten notes. Buy from here 👇🏻

gum.co/css-cheat