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
- The Transformed
- The Infinite II
- The Multicolor
- The Sliding II
- The Fancy II
- The Inverted II
- The 3D II
- The Morphing
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:
Top comments (22)
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.
the Shadowed #8 is meant to work on half of it :) wanted to be a kind of buggy/unexpected one ;)
Well mission accomplished then π! hehe.
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 π€£π€£π€£
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 ;)
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! π€£π€£π€£
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.
more collections will come in the future, stay tuned ;)
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
Yes of course, no problem ;)
thanks
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
Very good work!
Great. It's hard to say which is favorite. They are all awesome.
I like all the animations π₯.
Might implement some of them in my projects.
These are great! Thanks so much.
It's really awesome.
The unexpected section was really unexpected.
You are a CSS WIZARD.
thanks :)
You are providing useful information for developers! ππ»
So awesome π great job again π
Very nice.
This is great, thanks!