跳到主要内容

12大CSS动画资源

+$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.

01. Animista

Animista

+$Animista is a CSS animation playground

+$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

02. +$CSS3 Animation Cheat Sheet

CSS3 Animation Cheat Sheet

+$Explore this collection of preset, plug-and-play CSS3 animations

+$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.

03. Animate.css

animate.css

该库包含76个基本的CSS动画

+$This library bring together no fewer than 77 animations, all created in CSS and ready to use. Simply reference the CSS file, and when you add classes to an element, the animation happens. This works best when adding or removing classes using JavaScript.

+$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.

04. Hover.css

Hover.css

Hover.css专注于按钮交互动画

+$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.

05. CSShake

CSShake

CSShake专注于摇动动画

+$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.

06. Obnoxious.css

obnoxious CSS animation

想知道怎么不做CSS动画?

Obnoxious.css由Tim Holman创建,正如其名称所示。该库探讨了CSS动画的可能性,但完全说明了CSS动画不应该做的事情。虽然作为一个产品就绪的动画库(并且它是),但它本来是一种诙谐的态度。振作起来。

07. Replainless.CSS

Replainless.CSS

这些动画非常快

+$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

animate plus

此动画库非常适合移动网站

Stripe以其精美的动画产品页面而闻名。其中一位策划者Benjamin De Cock创建了一个高性能且轻量级的CSS和SVG动画库,使其特别适合移动设备。

09. 运动UI

CSS animation frameworks

像Motion UI这样功能强大的动画师是有用的CSS工具

来自ZURB的这个Sass库使您可以更轻松地将自定义动画应用于UI。它比这个列表中的其他一些库更复杂,但非常强大。您可以创建和调整动画以满足您的需求,然后使用JavaScript调用它们。

10. BounceJS

bouncejs

使用此工具可以创建自己的动画库

如果要创建自己的动画库,这是一个有用的工具。它有很多有趣的预设,可以解决复杂的动画代码问题。它使用高级变换操作来创建动画,然后可以将其添加到您自己的动画CSS文件中并根据需要应用。

11. GreenSock动画平台

GreenSock Animation Platform

进一步了解GreenSock

GSAP是一个JavaScript动画框架。如果您要创建更复杂的动画(例如横幅广告或英雄图像),GSAP会提供一组用于处理回放,SVG补间等的工具。如果你想要比CSS动画中的功能更进一步,这是很好的,但确实提供了一些学习曲线。要了解更多信息,请查看我们的GSAP指南

12. 缓解功能cheatsheet

Easing functions

使用此备忘单可以更轻松地缓解功能

时间功能指定随时间变化的速率,此站点可帮助您为动画或过渡选择正确的变量。它有一个带Bézier曲线的画廊,您可以在其中预览它们,并快速复制代码。

阅读更多:



翻译字数超限