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
- The Strange
- The Abstract
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.
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)
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
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? 😱
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!
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!)
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!
Then, who is the
of your world ?
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!
I am planning to have such kind of posts in the near futur ;)
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 !
why not. maybe in one of my next post ;)
YAY !
@afif Thanks for sharing with us, I use at least two different for my projects and clients like them..
glad to hear this 👍
That`s amazing, I really enjoyed the different animations you are able to do with pure CSS
I like this one 😊
Thank you for posting this series!
I really like your codepen work, just followed you on codepen and your creativity is amazing! Keep it up ;-)
Again Again Nice work... you never run out of ideas that makes me amazed.
Wow!! I love this
Some comments have been hidden by the post's author - find out more