+$Creating meaningful and beautiful CSS animations can be tricky and time-consuming, but luckily there are some great resources around to help jump-start your creative process. This resource collection includes all the best CSS animation libraries.
+$Pick one that suits your project and start straight away, or use them as a starting point to create something custom for your brand. There are also some handy crib sheets and shortcuts to supplement your learning.
+$If you're not sure what you want to create, then why not look at our inspirational+$CSS Animations Examples+$post for some ideas.
+$Animista is a kind of playground where you can edit and play around with a collection of pre-made CSS animations. Then copy out the code of any you want, for use in your projects. Animista started life as a side project for front end developer Ana Travas, who's still developing it. Get started with this tool using our+$guide to mastering on-demand CSS animations with Animista。
+$This helpful project offers a set of preset, plug-and-play animations for you to use in your web projects. There are clear instructions to help you get started, but essentially, you just add the stylesheet to your website and apply the pre-made CSS classes to the elements you want to animate. This cheat sheet uses CSS3 keyframes, which means you don't need to worry about positioning the element to make room for the animations.
+$The library is an impressively small file size when minified and gzipped, but if you don't want to load the entire thing into your site, the project is also a great source of inspiration. Compiled by Dan Eden, this library includes almost every CSS animation you could need, from the basics (bounce, fade in) to something more exciting (Jack in the Box, Jello). Use the drop-down menu on the homepage to see the title of the library animate in each of the different styles.
+$Similar to Animate.css, Hover.css is a collection of CSS effects you can use in your projects. This library was created specifically for button interaction animations. The library can be downloaded in vanilla CSS, Sass or Less – so they'll fit into pretty much any project. The library has almost every animation you might need for interaction.
+$CSShake is a library of CSS animations dedicated to making elements shake. The library has a number of classes you can add to elements to apply one of many different shake animations. The animations use keyframes and utilise the transform property to create animations that are sometimes crazy looking, but definitely hard to ignore. Now there's also a sister library –+$Reshake+$– which offers the shake effects as a React functional component.
+$Replainless.css is a small and lightweight CSS animation library with a focus on creating animations that do not cause a repaint from the browser (so long as they’re used correctly). By not requiring a reflow or repaint, these animations are super-fast and performant!
08. Animate Plus
Stripe以其精美的动画产品页面而闻名。其中一位策划者Benjamin De Cock创建了一个高性能且轻量级的CSS和SVG动画库，使其特别适合移动设备。