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
Table of content
- The Basic
- The Continuous
- The Double
- The Two Steps
- The Unexpected
- The Rounded
- The Fading
- The Infinite
- The All Sides
- The Thick
- The Sliding
- The Fancy
- The Inverted
- The 3D
The Basic
The Continuous
The Double
The Two Steps
The Unexpected
The Rounded
The Fading
The Infinite
Keep the hover for too long here.
The All Sides
The Thick
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
The Fancy
(2) and (5) use some hardcoded values that need to be adjusted based on the element width
The Inverted
The below doesn't work on Firefox due to a known bug
The 3D
Warning: the below uses some advanced CSS but I considered CSS variables to make it easy to control
That's it!
Tell me what do you think and which one is your favorite. 👇
I am also doing CSS loaders
You want to support me?
Discussion (120)
You are really hardworking @afif 👍
thanks :)
Amazing collection! I used the "Basic 3" on a recent project, but had a CSS validation error, that boiled down to
linear-gradient(currentColor 0 0).Is that a short way of writing
linear-gradient(to bottom, currentColor 0 0, currentColor 100% 0)?And, as
to bottomis default, that can be omitted I guess?It's the short way of writing
linear-gradient(currentColor,currentColor). The direction and the color stops aren't important since a gradient between two same colors will always give that color. I am defining two colors stop for it (0and0) to write the color only once inside the gradient.The syntax I am using is a bit uncommon but it's valid. The CSS validator is never up to date anyway.
I wrote a recent article about this if you want: css-tricks.com/cool-hover-effects-...
Cool, didn’t know that syntax!
Great job on putting this collection together!
I'm rather partial to The Double and The 3D :)
I have released more collections if you are intrested :) dev.to/afif/series/12016
Tested just now on Mac OS with Firefox 86.0.1, and it works well ;)
Otherwise, Thanks a lot for the ideas... I just like the inverted :D
good, probably the bug occur only on Windows OS then.
Wow incredible job Temani!!
I think I'll try out some of these in apps I'm developing on at work soon! Probably will try or at least consider these for future public facing sites I work on in the future as well.
My favorite are the 3D and Fancy ones at the bottom but I think for basic Db Web Apps I might use "The Basic" or "The All Sides" as I feel they provide just enough visual effects for a user to think "that's nice" but not distract from the site or task at hand.
I have released more collections if you are intrested :) dev.to/afif/series/12016
Great job! These are awesome, your CSS skills and design are incredible!
I'm loving it!
There are some people who can use every single animation as a different post for a series actually and then there's this guy.
Great minds
thanks :) will probably create more posts like this in the future ;)
That is indeed commendable. So many variations for a single state.
It is really impressive. Could you make youtube tutorials explaining the technique you use to achieve these effects? I would like to learn.
Will think about this in the future. I never made tutorial videos but would be good to start doing it ;). In the meantime, If you have a question or you need a clarification about a particular effect I can explain you via comment
I have released more collections if you are intrested :) dev.to/afif/series/12016
Wow
Great work 👏
Thanks :D
Massive, thanks for sharing!
very nice archive for animations.
Thanks for the time and effort you put into this fantastic list!
How do you get the animation to wrap with the link text?
Thanks again!
well, most of them are not meant to work on wrapped text. I made them for menu item, short link, buttons, etc so only one line ... if you have a specific animation you want to wrap with text I can help you with
Thank you! "The Infinite" #2 animation would look nice when wrapping with text IMHO. Thank again!
here is with wrapping : jsfiddle.net/que6njpo/ .. you simply need to remove the display:inline-block ;)
Wow! Nice work!
I LOOOOOOVE your pure css effects🤩 is it possible for you to do a series on mouse cursor effects?
what kind of mouse cursor effects? can you show me examples :)
I think for one this one is crazy cool (unfortunately just a video)
youtube.com/watch?v=OYEymzptnHc
but would be soooo interesting to see what you would come up with with pure css regardless of whether the above is interesting to you or not...I read your posts religiously :)
ok I will keep this in mind ;) I always like to challenge my self as well
Amazing stuff!
These all look amazing! My favorite is fancy-1. Good job!
Thank you very much. I used the 8th one from the "The All Sides" pack in my new blog and it turnet out awesome. :)
Check it out: uselessdivs.com/
great work, appreciate it!
Thanks for your the hard work and for sharing that with the community!
I have released more collections if you are intrested :) dev.to/afif/series/12016
How About the ones that are half background colored already and half happens on hover?
I didn't understand what you mean?
The effect in which the bottom border changes to be a background.
CodePen Example: codepen.io/geoffgraham/pen/GXoOdK
The Thick #2 and #3 are almost similiar to what you are showing me ;) They simply have an extra transition than you can remove if you want.
Hmm, favourite? So many! mix-blend-mode: difference; might be an alternative to the background-clip: text.
mix-blend-mode won't work because I am using only one element but yes if you consider an extra wrapper for the text then it can work but in such case I would simply use pseudo element to seperate the layers (ex: jsfiddle.net/ov91mjfx/) but I wanted to challenge myself and do all of them with no pseudo element, no keyframes, no extra element, etc ;)
we want a Version that can play arkanoid! ;-)
Cool stuff!
Here you go with another list: dev.to/afif/100-more-underline-ove...
Arkanoid is there! :)
well, why not. A crazy person like me can come with such crazy idea :) maybe in the next collection, stay tuned ;) [yes there is another collection coming! ]
Amazing css collection. Thanks!
I have released more collection if you are intrested :) dev.to/afif/series/12016
thanks for the tips
Awesome Bro
Very good work.
Love these! And the second collection. Thanks so much.
Good job there is a lot to be learned here.
Amazing, it's fun how IHM can be "alive" with few lignes of css