DEV Community

Cover image for Adding 100 underline/overlay animations | The impressive CSS collection ⭐️
Temani Afif
Temani Afif

Posted on

Adding 100 underline/overlay animations | The impressive CSS collection ⭐️

After the CSS loaders, it's time for this collection to reach 500 animations as well. Yes, 500 CSS underline/overlay animations!

I wanted to reach that milestone without using pseudo elements but it was a bit tough 😅 so for this one I will introduce pseudo elements.

As usual: No SVG, No JS, No keyframes, only one HTML element and CSS transitions.

Let's go!


Table of content


The Cloned

The Irregular III

The Colorful II

The All Sides IV

The Unexpected IV

The Fancy V

The Broken III

The Stroke

The Transformed II

The Multicolor III

The Inverted V

The Multi-Steps II

all the below will not work on Firefox due to the lack of support of @property

The Strange

#1,#2,#3 and #4 will not work on Firefox

The Abstract

Tell me what do you see and I will tell you who you are


That's it!

If I count the CSS loaders, you have now more than 1000 single div animations.

one thousand

In case you missed the last CSS loaders collection


A special thanks to @adriantwarog who made a video about my first collection.

Top comments (24)

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Release buddies lol, literally one minute apart!

Not even read yours yet, but I know it will deserve a ❤🦄 and 📘 so I gave them to you already!

Glad to see your post, seems like ages since the last one!

And don't forget that

 

 

You are at the centre of my world 😉

 

 

Edit after reading

Ok so the abstract ones being like Rorschach tests is cool, I see a screw thread, a spaceship, a sweet in a wrapper, a bat, a butterfly and a splat!

Am I OK Doc?

Will I live? 😱

Collapse
 
afif profile image
Temani Afif

Am I OK Doc? Will I live?

Hmmm 🧐. It seems when you were child, there is someone who always steal your lunch and you was afraid of him. You had a cat called Storm and you hate beans. You were a... Oh, this session is over, you will continue next time. 100$ please!

Collapse
 
grahamthedev profile image
GrahamTheDev

Pfff, that wasn't worth it, I am off to consult Doctor Google and Web MD, that always seems to work well.

10 minutes later...it appears I have Cancer.
.
.
.
.
.
.
.
(p.s. the joke is that Web MD always says you have Cancer, it is a bit of a meme, I am not making light of Cancer itself!)

Thread Thread
 
afif profile image
Temani Afif

it either tell you have a cancer or you have to drink cold water while putting your finger inside your ear and count until 10 ... In all the cases, never ever go to a doctor!

Collapse
 
posandu profile image
Posandu • Edited

Then, who is the

left:var(--left,unset);
right:var(--right,unset);
bottom:var(--bottom,unset);
top:var(--top,unset);
Enter fullscreen mode Exit fullscreen mode

of your world ?

Collapse
 
posandu profile image
Posandu

I would be happy to see you making this i.giphy.com/media/3o6Zt3c5K3nBhU2L....
By the way - This is also a large collection ! Thank you for making this stuff !

Collapse
 
afif profile image
Temani Afif

why not. maybe in one of my next post ;)

Collapse
 
posandu profile image
Posandu

YAY !

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

You should do tutorials for these animations! I know you've written about background-image and keyframe-less animations, but it would be cool to see how you go about building these. Very cool as usual!

Collapse
 
afif profile image
Temani Afif

I am planning to have such kind of posts in the near futur ;)

Collapse
 
ipapoutsidis profile image
Ilias Papoutsidis

@afif Thanks for sharing with us, I use at least two different for my projects and clients like them..

Collapse
 
afif profile image
Temani Afif

glad to hear this 👍

Collapse
 
gleisser profile image
Gleisser

That`s amazing, I really enjoyed the different animations you are able to do with pure CSS

Collapse
 
kishan_bharda profile image
Kishan Bharda

I like this one 😊

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Amazing as always. I may actually use one of these for a future project. 🤔😊

Collapse
 
tatihirata14 profile image
平田

Thank you for posting this series!

Collapse
 
typo3freelancer profile image
Simon Köhler

I really like your codepen work, just followed you on codepen and your creativity is amazing! Keep it up ;-)

Collapse
 
jstvikrant profile image
Vikrant

Again Again Nice work... you never run out of ideas that makes me amazed.

Collapse
 
webafk profile image
web-afk

really beautifull

Collapse
 
ifierygod profile image
Goran Kortjie

This reminds me of a saying that goes: With great power comes great responsibility.
You are awesome!

Collapse
 
gjeotech profile image
Onyeacholem Ifeanyi Joshua

Wow!! I love this

Collapse
 
aroyan profile image
Aroyan

Just registered to this platform and I see this post it's pretty mind blown for a newbie like me. Didn't regret join this platform

Collapse
 
ippatev profile image
Aleksandr Ippatev

Wow!

Some comments have been hidden by the post's author - find out more