100 underline/overlay animations | The ultimate CSS collection 🥇
Tags: css, beginners, webdev, codepen
Published: 2021-03-16 15:11:39

Get tired searching animations for your menu items and links? Search no more! Here is a list of more than 100 different animations. From the simple one to the more complex one, you will for sure find what you want.

No SVG, No JS, No extra tag, No pseudo element, No keyframes ... All of them are done using backgrounds, transition and only one element. Simply add a class and enjoy.

I am not relying on pseudo element so you can easily use them with elements like `input` (where we cannot have pseudo element).

In order to understand the logic of each animation, I highly recommend my previous article about `background-position` 

{% post https://dev.to/afif/all-you-need-to-know-about-background-position-3aac %}

----

## Table of content

* [The Basic](#the-basic)
* [The Continuous](#the-continuous)
* [The Double](#the-double)
* [The Two Steps](#the-two-steps)
* [The Unexpected](#the-unexpected)
* [The Rounded](#the-rounded)
* [The Fading](#the-fading)
* [The Infinite](#the-infinite)
* [The All Sides](#the-all-sides)
* [The Thick](#the-thick)
* [The Sliding](#the-sliding)
* [The Fancy](#the-fancy)
* [The Inverted](#the-inverted)
* [The 3D](#the-3d)

---

### The Basic

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

### The Continuous

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

### The Double

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

### The Two Steps

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

### The Unexpected

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

### The Rounded

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

### The Fading

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

### The Infinite

Keep the hover for too long here.

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

### The All Sides

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

### The Thick

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

### The Sliding

The below requires us to know the width of the element so it's more suitable for monospace fonts where we can use the `ch` unit
{% codepen https://codepen.io/t_afif/pen/PobgRJj %}

### The Fancy

{% codepen https://codepen.io/t_afif/pen/BaQEVqz %}
<sup>(2) and (5) use some hardcoded values that need to be adjusted based on the element width</sup>

### The Inverted

The below doesn't work on Firefox due to a [known bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1571244)

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

### The 3D

**Warning:** the below uses some advanced CSS but I considered CSS variables to make it easy to control

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

---

### That's it!

Tell me what do you think and which one is your favorite. 👇

I am also doing CSS loaders

{% post https://dev.to/afif/i-made-100-css-loaders-for-your-next-project-4eje %}

----

### <center>You want to support me?</center>

[![buy me a coffee](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/afif)

<center>**OR**</center>

[![Become a patron](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db3jtgy2i5l4w8slkps5.png)](https://www.patreon.com/temani)