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:

We can finally animate CSS gradient

Temani Afif ・ Feb 26 '21

#css #webdev #tutorial

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!

Still 100 CSS loaders for your next project

Temani Afif ・ Jun 15 '21

#css #webdev #beginners #html