DEV Community

Cover image for Still 100 underline/overlay animations | The advanced CSS collection 🚀
Temani Afif
Temani Afif

Posted on • Updated on

Still 100 underline/overlay animations | The advanced CSS collection 🚀

300 animations were not enough? Ok, I have done 100 more animations and, guess what, still No extra elements, No pseudo element, No SVG, No Keyframe and No JS. Only one element and some magic transitions!

This time I will introduce the @property to be able to animate CSS variables. Sorry Firefox users, most of animations won't work since there is no support for @property. I highly recommend Chrome or Edge to fully enjoy all the 100 animations!

Refer to my previous article for more detail about @property:


Table of content


The Shape II

The Multi-Steps

PS: all the below will not work on Firefox

The Mixed

PS: #6 will not work on Firefox

The Colorful

The Pixelated

The Irregular II

The Multicolor II

PS: all the below will not work on Firefox

The All Sides III

PS: #1, #2 and #7 will not work on Firefox

The Fancy IV

PS: all the below will not work on Firefox

The Inverted IV

The below will not work on Firefox due to a known bug and also due to the lack of support for @property

The Broken II

The Crushed

The Area 51

☢️ Danger Zone: hover the below at your own risk!

PS: #2 will not work on Firefox

The Arcade II

Warning: the below may 🤯🤯

PS: All the below will not work on Firefox


That's it!

Tell me which one is your favorite 👇 and don't forget to ❤️🦄 if you want me to do another collection. Can we make this reach 500 animations? Your reactions will decide!


Discussion (8)

Collapse
inhuofficial profile image
InHuOfficial

Another great list, just waiting for the point when "the arcade" becomes a fully playable game on hover!

Collapse
anita_barbosa17 profile image
Ana Barbosa Venegas

wow! 🤩

Collapse
stephanemalho profile image
stephanemalho

🤩

Collapse
guscarpim profile image
Gustavo Scarpim

Niceeeeee!!

Collapse
vishal2369 profile image
Vishal2369

As always awesome and alien capturing 'me' was my favorite.

Collapse
madza profile image
Madza

These are all next level, again 💯🙌

Collapse
carolmckay profile image
CarolMcKay

My faves are The Multicolor II: 1. and The All Sides III: 7. Sweet!

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