100 underline/overlay animations | The ultimate CSS collection ?

This content originally appeared on DEV Community and was authored by Temani Afif

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 ・ Mar 13 ・ 12 min read

#webdev #tutorial #beginners #css

Table of content

The Basic

Few notes:

currentColor will use the color defined inside color.
I am using CSS variables to make the code shorter. var(--d, 0) means that the default value is 0 then I change it on hover.
The syntax 0 100% /var(--d, 0) 3px means background-position / background-size. We adjust the 3px to control the height/thickness of the line.

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. ?

This content originally appeared on DEV Community and was authored by Temani Afif

Print Share Comment Cite Upload Translate Updates

APA

Temani Afif | Sciencx (2021-03-16T15:11:39+00:00) 100 underline/overlay animations | The ultimate CSS collection ?. Retrieved from https://www.scien.cx/2021/03/16/100-underline-overlay-animations-the-ultimate-css-collection-%f0%9f%a5%87/

MLA

" » 100 underline/overlay animations | The ultimate CSS collection ?." Temani Afif | Sciencx - Tuesday March 16, 2021, https://www.scien.cx/2021/03/16/100-underline-overlay-animations-the-ultimate-css-collection-%f0%9f%a5%87/

HARVARD

Temani Afif | Sciencx Tuesday March 16, 2021 » 100 underline/overlay animations | The ultimate CSS collection ?., viewed ,<https://www.scien.cx/2021/03/16/100-underline-overlay-animations-the-ultimate-css-collection-%f0%9f%a5%87/>

VANCOUVER

Temani Afif | Sciencx - » 100 underline/overlay animations | The ultimate CSS collection ?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/16/100-underline-overlay-animations-the-ultimate-css-collection-%f0%9f%a5%87/

CHICAGO

" » 100 underline/overlay animations | The ultimate CSS collection ?." Temani Afif | Sciencx - Accessed . https://www.scien.cx/2021/03/16/100-underline-overlay-animations-the-ultimate-css-collection-%f0%9f%a5%87/

IEEE

" » 100 underline/overlay animations | The ultimate CSS collection ?." Temani Afif | Sciencx [Online]. Available: https://www.scien.cx/2021/03/16/100-underline-overlay-animations-the-ultimate-css-collection-%f0%9f%a5%87/. [Accessed: ]

rf:citation

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.