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…


This content originally appeared on DEV Community and was authored by Temani Afif

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:

afif image

We can finally animate CSS gradient

Temani Afif ・ Feb 26 ・ 2 min read

#css #webdev #tutorial

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!

I am also on twitter:

                     Click Here & Follow me

           


This content originally appeared on DEV Community and was authored by Temani Afif


Print Share Comment Cite Upload Translate Updates
APA

Temani Afif | Sciencx (2021-04-28T15:06:28+00:00) Still 100 underline/overlay animations | The advanced CSS collection ?. Retrieved from https://www.scien.cx/2021/04/28/still-100-underline-overlay-animations-the-advanced-css-collection-%f0%9f%9a%80/

MLA
" » Still 100 underline/overlay animations | The advanced CSS collection ?." Temani Afif | Sciencx - Wednesday April 28, 2021, https://www.scien.cx/2021/04/28/still-100-underline-overlay-animations-the-advanced-css-collection-%f0%9f%9a%80/
HARVARD
Temani Afif | Sciencx Wednesday April 28, 2021 » Still 100 underline/overlay animations | The advanced CSS collection ?., viewed ,<https://www.scien.cx/2021/04/28/still-100-underline-overlay-animations-the-advanced-css-collection-%f0%9f%9a%80/>
VANCOUVER
Temani Afif | Sciencx - » Still 100 underline/overlay animations | The advanced CSS collection ?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/28/still-100-underline-overlay-animations-the-advanced-css-collection-%f0%9f%9a%80/
CHICAGO
" » Still 100 underline/overlay animations | The advanced CSS collection ?." Temani Afif | Sciencx - Accessed . https://www.scien.cx/2021/04/28/still-100-underline-overlay-animations-the-advanced-css-collection-%f0%9f%9a%80/
IEEE
" » Still 100 underline/overlay animations | The advanced CSS collection ?." Temani Afif | Sciencx [Online]. Available: https://www.scien.cx/2021/04/28/still-100-underline-overlay-animations-the-advanced-css-collection-%f0%9f%9a%80/. [Accessed: ]
rf:citation
» Still 100 underline/overlay animations | The advanced CSS collection ? | Temani Afif | Sciencx | https://www.scien.cx/2021/04/28/still-100-underline-overlay-animations-the-advanced-css-collection-%f0%9f%9a%80/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts