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...
For further actions, you may consider blocking this person and/or reporting abuse
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!
You are really hardworking @afif 👍
thanks :)
This is incredible!
Awesome collection - bookmarked! I am sure I'll be using this!
Awesome! 🔥
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!
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
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 ;)
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.
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
That is indeed commendable. So many variations for a single state.
Wow
Great 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
Wow! Nice work!
Thanks :D
Massive, thanks for sharing!
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 ;)
very nice archive for animations.
This is awesome, well done
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.
Very good! Very good and useful. You must have done a lot of work, congratulations.
loved the varitions
very nice!
Amazing css collection. Thanks!
Damn, how much did you spent making this?
I don't remember exactly because each time I get an idea I add it to the collection until I reached the 100 but I would say around 1 week and a half from when I got the idea to the release of the article
Love the efforts you're putting in
This is cool stuff @afif . Thanks for sharing!
Lovely
i <3 these! Thanks for sharing
I like learn CSS and I like this post 🙂
This is the best animation/hover article
This article brought me here ;)
Awesome!
prefers-reduced-motion 😄
Man hats-off you. I loved the efforts you made. Thanks a lot Man👍🏻
Such an awesome stuff!
Amazing! Good job!
All these effect are really awesome. So nice work. Congratz 🎉
What in the world, animations with just background and background-position? That's the most ingenious CSS trick I've ever seen. And all of these effects are so slick. You sir are a genius!
Thanks :)
This is only a small portion of what CSS can do. I still have more magic to show in future articles ;)
Awesome work, love the Fancy #4 :)
Wow
Thanks for your sharing! <3
wow this is awesome thank u for this
This is gorgeous. Thanks so much for this resource. If i had to pick a favorite, i think there’s something beautiful about inverted #6.
This is amazing. thank you!
Wow, so nice!
awesome! Thanks.
I like 'The All Sides #6'
awesome! good job Temani :)
Wow, so nice!
Amazing collection. Thanks!
这个很棒！！ This is great! !
Amazing stuff!
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
Excellent
you're welcome. Wait for more collection like this ;)
I’m not sure if it’s only me but I can’t seem to see previews of any of the animations in the post body on my ios chrome. It’s a good post Thank you, I’m gonna check it out on my computer :)
are you able to see the "Hover me" text? or you cannot see the codepen preview at all?
Everything under heading ‘The Unexpected’, ‘The Rounding’... etc
How can you do such a cool things?
If you want to do it then you can do it :)
Amazing!!!
Nice work!
why search effects on google after this post :D
thanks man
awesome, thank you for sharing
nice collection, really :)
I have released more collection if you are intrested :) dev.to/afif/series/12016
Amazing, i love it
Awesome man! Reminded me just how little I know css😅
It's really a great work
Thank you for this eg..
Thank you! This is great
Very useful content, Thank you
Most of these are about as obnoxious as the infamous old <flash> attribute. But I do like Rounded #5. That's feasible in a real app.
Love them looks great. Nice work 😀
Thank you !! 🔥
Wow, really impressive!
Great job! :-)
Amazing work. Thanks for sharing. The only problem with these effects is that they rarely works when the text breaks across multiple lines
It's not a problem, I explicitely made them to work on menu items, short links, button, etc so only one line of text
I am not a CSS guy but this article made me think think about becoming a CSS dev.
Thanks @afif
fucking amazing work Temani... 😱
Great job brother...
Agreed its pretty awesome.
What's the variable value for
--pand--dand I assume we can't add a border radius to the "All Sides"
I am using the variables to make the code shorter so for example instead of using
background-position:0% 100%and on hover I make itbackground-position:100% 100%I use a variable inside the first definition to havevar(--p,0%) 100%and later I simply change the value of the variable and make it--p: 100%.And no, we cannot use border-radius. I will probably prepare another list with radius ;)
Nice. Thx
Looks like you have very creative designer in you project
where is the source code link
I want to automatically create an underline and then automatically remove the underline, what should I do? Could you help me?