DEV Community

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

Posted on โ€ข Edited on

1

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.

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay