DEV Community

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

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

Temani Afif on March 30, 2021

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...
Collapse
 
grahamthedev profile image
GrahamTheDev

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

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

Collapse
 
grahamthedev profile image
GrahamTheDev

Well mission accomplished then 😋! hehe.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

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

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
 
grahamthedev profile image
GrahamTheDev

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

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

Yes of course, no problem ;)

Collapse
 
motz795 profile image
MOATAZ795

thanks

Collapse
 
icecoffee profile image
Atulit Anand • Edited

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
Mikhail

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

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

Collapse
 
afif profile image
Temani Afif

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!