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

jopen 8年前

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

15 Best CSS3 Animation Tools for Developers | Code Geekz
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

15 Best CSS3 Animation Tools for Developers | Code Geekz
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

15 Best CSS3 Animation Tools for Developers | Code Geekz
The CSS3 Keyframes Animation Generator, as the name suggests, is an online tool that lets you create CSS3 keyframe animations.

4. Magic

15 Best CSS3 Animation Tools for Developers | Code Geekz
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

15 Best CSS3 Animation Tools for Developers | Code Geekz
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

15 Best CSS3 Animation Tools for Developers | Code Geekz
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

15 Best CSS3 Animation Tools for Developers | Code Geekz
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

15 Best CSS3 Animation Tools for Developers | Code Geekz
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

15 Best CSS3 Animation Tools for Developers | Code Geekz
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

15 Best CSS3 Animation Tools for Developers | Code Geekz
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

15 Best CSS3 Animation Tools for Developers | Code Geekz
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

15 Best CSS3 Animation Tools for Developers | Code Geekz
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

15 Best CSS3 Animation Tools for Developers | Code Geekz
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

15 Best CSS3 Animation Tools for Developers | Code Geekz
deCSS3 is a bookmarklet that will let you see how well your pages gracefully degrade without having to open up IE6-8.

15. GFX

15 Best CSS3 Animation Tools for Developers | Code Geekz
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.