DEV Community

Cover image for Adding Transition ๐Ÿง
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Posted on • Edited on

Adding Transition ๐Ÿง

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

In this post, I'll explain to you how to add transition on hover. ๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡ here you can see our HTML file in that we have our heading tag "Hover over me". And in our CSS file, you can see we are targeting heading and heading:hover. We can add a transition in CSS in two ways.

Manual Transition

In the first way, we are adding transition effect to each and every tag manually

But in a second way, we can add the transition to all tags at once like this ๐Ÿ‘‡

Smart transition property

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

Top comments (0)