Adding 100 underline/overlay animations | The impressive CSS collection ⭐️
Tags: showdev, css, webdev, codepen
Published: 2021-08-10 09:50:07

After the [CSS loaders](https://dev.to/afif/i-made-100-css-loaders-for-your-next-project-4eje), 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-cloned)
* [The Irregular III](#the-irregular-iii)
* [The Colorful II](#the-colorful-ii)
* [The All Sides IV](#the-all-sides-iv)
* [The Unexpected IV](#the-unexpected-iv)
* [The Fancy V](#the-fancy-v)
* [The Broken III](#the-broken-iii)
* [The Stroke](#the-stroke)
* [The Transformed II](#the-transformed-ii)
* [The Multicolor III](#the-multicolor-iii)
* [The Inverted V](#the-inverted-v)
* [The Multi-Steps II](#the-multi-steps-ii)
* [The Strange](#the-strange)
* [The Abstract](#the-abstract)

-------------------------------------------------

### The Cloned

{% codepen https://codepen.io/t_afif/pen/QWvzQzY %}

### The Irregular III

{% codepen https://codepen.io/t_afif/pen/LYyMQqW %}

### The Colorful II

{% codepen https://codepen.io/t_afif/pen/MWmZQxg %}

### The All Sides IV

{% codepen https://codepen.io/t_afif/pen/XWRoZQm %}

### The Unexpected IV

{% codepen https://codepen.io/t_afif/pen/MWmZQdW %}

### The Fancy V

{% codepen https://codepen.io/t_afif/pen/LYyMQKy %}

### The Broken III

{% codepen https://codepen.io/t_afif/pen/zYwyRgq %}

### The Stroke

{% codepen https://codepen.io/t_afif/pen/BaRvYXq %}

### The Transformed II

{% codepen https://codepen.io/t_afif/pen/RwVEMbM %}

### The Multicolor III

{% codepen https://codepen.io/t_afif/pen/GRmPxRG %}

### The Inverted V

{% codepen https://codepen.io/t_afif/pen/dyWwmPV %}

### The Multi-Steps II

<sub>all the below will not work on Firefox due to the lack of support of `@property`</sub>

{% codepen https://codepen.io/t_afif/pen/abWPYOp %}

### The Strange

<sub>#1,#2,#3 and #4 will not work on Firefox</sub>

{% codepen https://codepen.io/t_afif/pen/jOmXzPg %}

### The Abstract

Tell me what do you see and I will tell you who you are

{% codepen https://codepen.io/t_afif/pen/RwVEMWy %}

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

### That's it!

If I count the CSS loaders, you have now more than **1000** single div animations.

![one thousand](https://media.giphy.com/media/3o6Zt3c5K3nBhU2LG8/giphy-downsized.gif)

In case you missed the last CSS loaders collection

{% post https://dev.to/afif/adding-100-css-loaders-to-the-collection-of-500-css-loaders-2a3p %}

-------------------------------------------------

A special thanks to @adriantwarog who made a video about my first collection. 

{% youtube cDXUPkcw8HM %}