There are an awful lot of libraries that want to help you animate things on the web. These aren’t really libraries that help you with the syntax or the technology of animations, but rather are grab-and-use as-is libraries. Want to apply a class like “animate-flip-up” and watch an element, uhhh, flip up? These are the kind of libraries to look at.
I wholeheartedly think you should both 1) learn how to animate things in CSS by learning the syntax yourself and 2) customize animations to tailor the feel to your site. Still, poking around libraries like this helps foster ideas, gets you started with code examples, and might form a foundation for your own projects.
Let’s take a look at the landscape of them. Some libraries have different approaches: only take what you need classes, Sass mixins, light JavaScript libraries for adding/removing classes, etc. But they are all essentially “CSS animation libraries.” (Some of them are kinda funny having “CSS3” in the title, which kinda dates them. People just don’t say that anymore.)
While animations can both be fun and create useful interactions, it’s worth remembering that not all users want them when browsing the web. See Eric Bailey’s “Revisiting prefers-reduced-motion, the reduced motion media query” for information on how to accommodate users who prefer little or no motion.
Animista
You pick an animation you like and it gives you a class name you can use that calls a keyframe animation (you copy and paste both). The point is you just take what you need.
See the Pen
Animista Example by Chris Coyier (@chriscoyier)
on CodePen.
Animate.css
One of the big original classic CSS animation libraries from Dan Eden.
See the Pen
Animate.css (Part 3) by Hudson Taylor (@Hudson_Taylor11)
on CodePen.
tachyons-animate
Tachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need. tachyons-animate extends those by adding “Single purpose classes to help you orchestrate CSS animations.” It can be used alone, but even the docs suggest it can be used in combination with other animation libraries since helper classes are generically useful.
See the Pen
tachyons-animate by Chris Coyier (@chriscoyier)
on CodePen.
Infinite
These animations, like rotations and pulses, that are specifically designed to run and repeat forever.
See the Pen
BgrYZo by Chris Coyier (@chriscoyier)
on CodePen.
Motion UI
A Sass library for creating flexible CSS transitions and animations.
See the Pen
Motion UI by Chris Coyier (@chriscoyier)
on CodePen.
micron
a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power
See the Pen
Micron by Chris Coyier (@chriscoyier)
on CodePen.
Vivify
Vivify is sort of like Animate.css in the sense that it contains a lot of the same types of animations. It does offer plenty of its own as well.
See the Pen
Vivify by Chris Coyier (@chriscoyier)
on CodePen.
Hover.css
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
See the Pen
Hover.css by Chris Coyier (@chriscoyier)
on CodePen.
AllAnimationCss3
See the Pen
All Animation by Chris Coyier (@chriscoyier)
on CodePen.
Magic Animations CSS3
See the Pen
Magic Animations by Chris Coyier (@chriscoyier)
on CodePen.
It’s Tuesday.
A quirky CSS Animation Library.
See the Pen
Tuesday by Chris Coyier (@chriscoyier)
on CodePen.
vhs
See the Pen
vhs by Chris Coyier (@chriscoyier)
on CodePen.
ReboundGen
See the Pen
ReboundGen by Chris Coyier (@chriscoyier)
on CodePen.
CSShake
See the Pen
CSSShake by Chris Coyier (@chriscoyier)
on CodePen.
Motion CSS
cssanimation.io
See the Pen
cssanimation.io by Chris Coyier (@chriscoyier)
on CodePen.
WickedCSS
See the Pen
WickedCSS animations by Chris Coyier (@chriscoyier)
on CodePen.
Woah.css
See the Pen
Woah.css by Chris Coyier (@chriscoyier)
on CodePen.
Obnoxious
See the Pen
Obnoxious.css by Chris Coyier (@chriscoyier)
on CodePen.
Hexa
Mimic.css
24 comments
https://hcialischeapc.com/ – buy online cialis
Write more, thats all I have to say. Literally, it seems as though
you relied on the video to make your point. You obviously know what youre talking about, why throw
away your intelligence on just posting videos to your site when you could
be giving us something informative to read?
Hey there just wanted to give you a quick heads up.
The words in your post seem to be running off the screen in Chrome.
I’m not sure if this is a formatting issue or something to do with internet browser
compatibility but I figured I’d post to let you know.
The style and design look great though! Hope you get the
issue fixed soon. Cheers
If you desire to get much from this piece of writing then you have to apply these
strategies to your won web site.
I loved as much as you will receive carried out right here.
The sketch is tasteful, your authored subject matter stylish.
nonetheless, you command get bought an shakiness over
that you wish be delivering the following. unwell unquestionably come further formerly again since exactly the same nearly a lot often inside
case you shield this increase.
I all the time used to read post in news papers but
now as I am a user of internet thus from now I am using net for posts, thanks to
web.
You’re so awesome! I do not think I’ve read a single thing like that before.
So good to find someone with genuine thoughts on this subject.
Really.. many thanks for starting this up. This website is something that’s needed
on the web, someone with some originality!
Great goods from you, man. I have understand your stuff previous to and you’re
just too great. I really like what you’ve acquired here,
certainly like what you are saying and the way
in which you say it. You make it enjoyable and you still take care of to keep it sensible.
I can not wait to read far more from you. This is really a great site.
With havin so much content and articles do you ever run into any problems of plagorism or copyright
infringement? My site has a lot of completely unique content I’ve
either authored myself or outsourced but it seems a lot of it
is popping it up all over the internet without
my agreement. Do you know any ways to help prevent content from being ripped off?
I’d really appreciate it.
Pretty! This was a really wonderful article. Thank you for supplying this
information.
Hey there I am so glad I found your weblog, I really found you by accident, while I was browsing on Bing for something else,
Nonetheless I am here now and would just like to say
thanks for a incredible post and a all round enjoyable blog (I
also love the theme/design), I don’t have time to read through it all at the moment but I
have saved it and also added in your RSS feeds, so when I have time I will be
back to read a lot more, Please do keep up the fantastic work.
quest bars http://bit.ly/3jZgEA2 quest bars
Saved as a favorite, I love your blog! asmr
https://app.gumroad.com/asmr2021/p/best-asmr-online asmr
fantastic put up, very informative. I ponder why the
other experts of this sector do not notice this. You should continue your writing.
I am confident, you have a huge readers’ base already!
scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery
This site truly has all the information and facts
I needed concerning this subject and didn’t know who to ask.
cheap flights http://1704milesapart.tumblr.com/ cheap flights
This post will help the internet visitors for creating new weblog or
even a weblog from start to end. scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis
surgery
Good information. Lucky me I found your blog by chance
(stumbleupon). I have saved it for later! ps4 https://bitly.com/3z5HwTp ps4
Hey! I know this is somewhat off topic but I was wondering
which blog platform are you using for this site?
I’m getting tired of WordPress because I’ve had problems with hackers and
I’m looking at options for another platform. I would be fantastic
if you could point me in the direction of a good platform.
quest bars https://www.iherb.com/search?kw=quest%20bars quest bars
https://cialiswithdapoxetine.com/ cialis online
https://cialiswithdapoxetine.com/ generic cialis
Thank you for every other informative site. The place else could I get that type of information written in such an ideal means?
I’ve a challenge that I am simply now operating on, and I’ve been at the glance out for such information.
I do not even know how I ended up here, but
I thought this post was great. I don’t know who you are but definitely you’re going to
a famous blogger if you aren’t already 😉 Cheers!
I have been surfing online more than 4 hours today, yet I never found any interesting article
like yours. It’s pretty worth enough for me. In my opinion, if all website owners and bloggers made good content as you did, the web will be much more useful than ever before.
hey there and thank you for your info – I have definitely picked up anything
new from right here. I did however expertise several technical issues using this
web site, since I experienced to reload the site a lot of times previous to I could get it
to load correctly. I had been wondering if your web hosting is OK?
Not that I’m complaining, but sluggish loading instances times will
often affect your placement in google and can damage your high
quality score if ads and marketing with Adwords.
Anyway I’m adding this RSS to my e-mail and
can look out for much more of your respective exciting content.
Ensure that you update this again soon.
Thank you for sharing your thoughts. I truly appreciate your efforts and I will be waiting for your next
post thank you once again.