100 underline/overlay animations | The ultimate CSS collection 🥇

Get tired searching animations for your menu items and links? Search no more! Here is a list of more than 100 different animations. From the simple one to the more complex one, you will for sure find what you want.

No SVG, No JS, No extra tag, No pseudo element, No keyframes ... All of them are done using backgrounds, transition and only one element. Simply add a class and enjoy.

I am not relying on pseudo element so you can easily use them with elements like input (where we cannot have pseudo element).

In order to understand the logic of each animation, I highly recommend my previous article about background-position

All you need to know about background-position

Temani Afif for This is Learning ・ Mar 13 '21

#webdev #tutorial #beginners #css

---

Table of content

• The Basic
• The Continuous
• The Double
• The Two Steps
• The Unexpected
• The Rounded
• The Fading
• The Infinite
• The All Sides
• The Thick
• The Sliding
• The Fancy
• The Inverted
• The 3D

---

The Basic

The Continuous

The Double

The Two Steps

The Unexpected

The Rounded

The Fading

The Infinite

Keep the hover for too long here.

The All Sides

The Thick

The Sliding

The below requires us to know the width of the element so it's more suitable for monospace fonts where we can use the ch unit

The Fancy

^{(2) and (5) use some hardcoded values that need to be adjusted based on the element width}

The Inverted

The below doesn't work on Firefox due to a known bug

The 3D

Warning: the below uses some advanced CSS but I considered CSS variables to make it easy to control

---

That's it!

Tell me what do you think and which one is your favorite. 👇

I am also doing CSS loaders

I made 100 CSS loaders for your next project

Temani Afif ・ May 12 '21

#css #webdev #beginners #html

---

OR

Comments

[Genevieve Curry]

Great job on putting this collection together!

I'm rather partial to The Double and The 3D :)

[Temani Afif]

I have released more collections if you are intrested :) dev.to/afif/series/12016

[Daniel Ignatov]

Amazing stuff!

[Redwei🇨🇳]

这个很棒！！ This is great! !

[Fum]

Amazing collection. Thanks!

[José María CL]

Wow, so nice!

[Miquel Camps]

awesome! good job Temani :)

[gray-kim]

awesome! Thanks.
I like 'The All Sides #6'

[0xKirz]

wow this is awesome thank u for this

[Zeke-D]

This is gorgeous. Thanks so much for this resource. If i had to pick a favorite, i think there’s something beautiful about inverted #6.

[Atulit Anand]

I'm loving it!
There are some people who can use every single animation as a different post for a series actually and then there's this guy.
Great minds

[Temani Afif]

thanks :) will probably create more posts like this in the future ;)