DEV Community

Cover image for Another 100 underline/overlay  animations | The extended CSS collection 🥇🥈
Temani Afif
Temani Afif

Posted on • Updated on

Another 100 underline/overlay animations | The extended CSS collection 🥇🥈

You all liked my previous collection of 100 animations so here I am with another collection. Now you have more than 200 different animations!

Like the previous one, you will find No SVG, No JS, No extra tag, No pseudo element, No keyframes. Only one element and transitions.

Enjoy 👍


Table of content


The Shape

The Double II

The Unexpected II

The Wavy

The Shining

The Shadowed


I am using a monospoce font for (6) because it's more convenient to have all the character at the same width

The Transformed


For (3),(4),(6) and (7) the value used inside the clip-path (21.5px and -38.43px) is around tan(angle)xWidth of the element . For the (5), it's a trial & error value

The Infinite II

Keep the hover a long time

The Multicolor

The below is suitable for monospace fonts where we can use the ch unit and all the character have the same width

The Sliding II

The below requires us to know the width of the element so it's also suitable for monospace fonts.

The Fancy II

The Inverted II

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

The 3D II

I am using the variable --d to easily control the 3D depth without changing the whole code

The Morphing


That's it

As usual, pick your favorite and see you next collection!

Don't forget to take a look at my CSS loaders collection:

Discussion (22)

Collapse
inhuofficial profile image
InHuOfficial

Fun list, great follow up to the first one!

Loved the morphing, 6 and 7 were unexpected!

"the Shinning" is something you do to someone who has wronged you (should be shining 😋)

"The shadowed" number 8 - appears to only work on half of it.

Collapse
afif profile image
Temani Afif Author

the Shadowed #8 is meant to work on half of it :) wanted to be a kind of buggy/unexpected one ;)

Collapse
inhuofficial profile image
InHuOfficial

Well mission accomplished then 😋! hehe.

Thread Thread
inhuofficial profile image
InHuOfficial

I can't wait to see the next 100, are we going to have the whole page move and the item stay still as there can't be many more things you can do now 🤣🤣🤣

Thread Thread
afif profile image
Temani Afif Author

as there can't be many more things you can do now --> Ah, you don't know how crazy I am ;) you may get surprised to see what I can still do :p

PS: I still didn't use pseudo element, extra elements and keyframes ;)

Thread Thread
inhuofficial profile image
InHuOfficial

Oh I wouldn’t be surprised, I am aware of your CSS ninja powers, I just worry how many people will think “that’s cool” and put it on a live site! 🤣🤣🤣

Collapse
eskabore profile image
Jean-Luc KABORE-TURQUIN

Nice, fun and probably useful at any point in time. I saved the page and follow you from now on. Keep posting such. It is kind of having a library of animations by the side anytime since CSS can be integrated almost anywhere.

Collapse
afif profile image
Temani Afif Author

more collections will come in the future, stay tuned ;)

Collapse
motz795 profile image
MOATAZ795

Hello brother (Temani Afif) Can I include your code in the CSS framework that I am working on knowing that I will include your page and your name in the resources section. You can visit the demo site for the framework from here (cnsb.000webhostapp.com/cnsbcss/cns... )
Really cool code Thanks

Collapse
afif profile image
Temani Afif Author

Yes of course, no problem ;)

Collapse
motz795 profile image
MOATAZ795

thanks

Collapse
icecoffee profile image
Atulit Anand • Edited on

I much appreciate both the gesture and the good work buddy.
All thanks to you and some other articles I finally learned the inverted ones.
Inverted II Part 1 - Personal favourite
thanks GIF

Collapse
bigol profile image
José Santos Silva

Very good work!

Collapse
host510 profile image
Михаил Гостищев

Great. It's hard to say which is favorite. They are all awesome.

Collapse
chideraike profile image
Chidera

I like all the animations 🔥.
Might implement some of them in my projects.

Collapse
simus51 profile image
simus51

These are great! Thanks so much.

Collapse
vishal2369 profile image
Vishal2369 • Edited on

It's really awesome.
The unexpected section was really unexpected.
You are a CSS WIZARD.

Collapse
afif profile image
Temani Afif Author

thanks :)

Collapse
garvitmotwani profile image
Garvit Motwani

You are providing useful information for developers! 🙏🏻

Collapse
geminii profile image
Jimmy

So awesome 😍 great job again 🎉

Collapse
ssikroesor profile image
SsikRoEsor

Very nice.

Collapse
lexausart profile image
lexausart

This is great, thanks!