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
Displaying a subset of the total comments. Please sign in to view all comments on this post.
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! 🔥
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.
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!
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
Thanks :D
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
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
Great work 👏
Massive, thanks for sharing!
Wow! Nice work!
Lovely
This is cool stuff @afif . Thanks for sharing!
very nice!
Amazing css collection. Thanks!
you're welcome. Wait for more collection like this ;)
loved the varitions
Very good! Very good and useful. You must have done a lot of work, congratulations.
Thank you! This is great
It's really a great work
Thank you for this eg..
Awesome man! Reminded me just how little I know css😅
Amazing, i love it
nice collection, really :)
I have released more collection if you are intrested :) dev.to/afif/series/12016
awesome, thank you for sharing
why search effects on google after this post :D
thanks man
Nice work!
Amazing!!!
How can you do such a cool things?
If you want to do it then you can do it :)
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
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
Amazing stuff!
这个很棒！！ This is great! !
Amazing collection. Thanks!
Wow, so nice!
awesome! good job Temani :)
awesome! Thanks.
I like 'The All Sides #6'
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!
Thanks for your sharing! <3
Wow
Awesome work, love the Fancy #4 :)
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 ;)
All these effect are really awesome. So nice work. Congratz 🎉
i <3 these! Thanks for sharing
This is awesome, well done
Such an awesome stuff!
Amazing! Good job!
Man hats-off you. I loved the efforts you made. Thanks a lot Man👍🏻
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
prefers-reduced-motion 😄
This article brought me here ;)
Awesome!
I like learn CSS and I like this post 🙂
This is the best animation/hover article
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! ]
Excellent
Amazing, it's fun how IHM can be "alive" with few lignes of css
Good job there is a lot to be learned here.
Love these! And the second collection. Thanks so much.
Very good work.
Awesome Bro
thanks for the tips
Amazing css collection. Thanks!
I have released more collection if you are intrested :) dev.to/afif/series/12016
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 ;)
great work, appreciate it!
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/
These all look amazing! My favorite is fancy-1. Good job!
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 ;)
Thank you !! 🔥