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
- The Mixed
- The Colorful
- The Pixelated
- The Irregular II
- The Multicolor II
- The All Sides III
- The Fancy IV
- The Inverted IV
- The Broken II
- The Crushed
- The Area 51
- The Arcade II
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!
Top comments (7)
Another great list, just waiting for the point when "the arcade" becomes a fully playable game on hover!
wow! ๐คฉ
๐คฉ
Niceeeeee!!
As always awesome and alien capturing 'me' was my favorite.
These are all next level, again ๐ฏ๐
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