开发人员的15个最好CSS动画工具

The latest version of the CSS, i.e. CSS3, has become more popular and got good reputation amongst designers, however, the learning process is still going on and yet there exists a need for some browsers to get updated for supporting it.

Building cool animations can sometimes be complicated and time-consuming though, that’s when animation libraries and generators can be excellently used. Therefore this article includes a list of Best CSS3 Animations Tools that would help you to create your own css3 animations without much efforts and hassle.

1. Magic CS33 Animations

Magic CSS3 Animations is a package of CSS3 animations with special effects that you can freely use for your web projects. Simple include the CSS style: magic.css or include the mynified version: magic.min.css.

2. CSS3 Animation Cheat Sheet

The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that’s IE 10).

3. CSS3 Keyframes

The CSS3 Keyframes Animation Generator, as the name suggests, is an online tool that lets you create CSS3 keyframe animations.

4. Magic

Magic is a stylesheet that includes many of these CSS effects (also mentioned that “more will be added”). The effects are collected under few categories (magic, perspective, rotate, bling, static, slide) and all of the effects are pretty attractive. Each of them has their own classes and the easiest way to use them is by adding/removing these classes to the targeted elements via JavaScript.

5. Animate.css

Animate.css provides you with a set of cool, cross-browser CSS3 animations. The animations are divided into groups such as Attention Seekers, Bouncing Entrances, Bouncing Exits, Fading Entrances, and many others, so you really can’t complain about a lack of choice.

6. Bounce. Js

Bounce.js is a tool for generating tasty CSS3 powered keyframe animations. The JS library for generating dynamic animations is on its way. Simply add a component, choose the preset. And then you can either get a short URL or export to CSS.

7. Hover.CSS

Hover.CSS is a useful collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. hover.css can be used in a number of ways; either copy and paste the effect you’d like to use in your own stylesheet or reference the stylesheet.

8. Ani.js

AniJS is a declarative handling library for CSS animations that makes development quicker and more eloquent. It’s fully documented and easy to get started with.

9. Progress.js

ProgressJs is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page. You can design your own template for progress bar or customize it simply.

10. Keyframer

Keyframer is a handy and useful tool that helps you to create CSS3 animations easily. Using keyframer is quite easy you only need to click the timeline to add a keyframe, then click the circle button to add your animation’s CSS, or the X button to delete the current keyframe, and test your skills.

11. Stylie

Stylie is a fun tool for easily creating CSS 3 animations. You can configure your animation graphically, tweak it, grab the generated CSS and go!

12. CSSketch

CSSketch is a Sketch 3 plugin that enables you to modify your designs quickly by attaching it a stylesheet to it that you can use to lay out your designs, change colors and shadows quickly, etc. It supports {less} stylesheets, which means you can put functions and variables in your stylesheet to make your workflow even more efficient. CSSketch is completely open source, so feel free to contribute to its development!

13. ALighter

ALighter is a jQuery plugin for creating a CSS3 animated highlighter. You can customize the animation (speed and easing), the effect (color, opacity, circle size, and blur), and the timer (set a custom duration or disable it entirely).

14. deCSS3

deCSS3 is a bookmarklet that will let you see how well your pages gracefully degrade without having to open up IE6-8.

15. GFX

GFX is a 3D CSS3 animation library that extends jQuery with some useful functionality for programmatically creating CSS3 transitions. CSS3 transitions are superior to manual ones (using setTimeout) as they’re hardware accelerated, something that is particularly noticeable on mobile devices.