DEV Community

Cover image for Customizing Transition
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Posted on • Edited on

Customizing Transition

Hey, beautiful faces, nice to see you.

This post is a part of our "21 Days of CSS animation post"

In this post, we'll learn how we can customize our transition effect.

There is some CSS Transition property which I'll explain to you one by one.

transition property

In this property, we are trying to target each property manually like font-colour, font-size and we can also target all property by all value.

Duration

In this property, we are setting a time duration period to our transition property from start to end our transition effect.

delay

Use of this property is to delay your transition effect for 1 second or whatever you are going to set it.

timing

This is a premade transition function property, it has different-different 4-5 property like linear, ease, ease-in, ease-out. Basically, it will add a different effect to your transition.

That's all for this post And if you are interested to learn CSS you can join Eduonix E-Learning platform.

Top comments (0)