20个HTML5动画工具

为您的网站创建梦幻般的HTML5动画肯定会让你的网站视觉更具震撼和创造性。但是创建动画是有点一项艰巨而耗时的任务，为节省您的时间，这里已经收集了20个最佳的HTML5动画工具。下面的HTML5动画工具将帮助您学习和创造HTML5动画，以使您的网站醒目和漂亮。

1. Animatron

Animatron is an online, simple tool that lets you create stunning HTML5 animations and interactive content right in your browser. It lets you collaborate with other users, import artwork, create custom shapes, draw directly within the tool, and much more. Use the intuitive Animatron Editor to design and publish movies, banners, and infographics that play everywhere, from desktop browsers to mobile devices. No coding necessary – what you see is what you get!

2. HTML5 Maker

HTML5 Maker is an online animation service/tool for creating animated, interactive content using HTML, HTML5, CSS and JavaScript. It’s very easy to use and at the same time it can help you achieving extremely good results. It allows producing cross-browser animated content such as javascript and html5 animation, Slideshows, Presentations and Sliders.

3. Tweenjs

TweenJS is a simple tweening library for use in Javascript. It was developed to integrate well with the EaselJS library, but is not dependent on or specific to it. It supports tweening of both numeric object properties & CSS style properties. The API is simple but very powerful, making it easy to create complex tweens by chaining commands.

4. Motion Composer

The perfect tool for the prosumer and professionals, MotionComposer bridges the gap between enthusiast and professional web designer, giving everyone the ability to create their own HTML5 or Flash® animations easily.

5. Adobe Edge Animate

Creating interactive, animated web content just got a whole lot easier with the launch ofAdobe Edge Animate. Edge Animate is easy to use, with precise control over motion graphics and HTML elements with a video-editor-like timeline interface. The content created works reliably on mobile devices running Android or iOS, as well as in modern desktop browsers. Fallback states are supported for older browsers. Edge Animate is available with a free Creative Cloud membership.

6. Mixeek

Mixeek is a free software tool for designing and executingweb animations and interactive animated web applications. It is purely based on JavaScript, CSS3 andHTML5. It’s been developed to bring lightweight, easy to use alternative to well known paid animation software tools.

7. Tumult Hype

Tumult Hype’s keyframe-based animation system brings your content to life. Click “Record” and Tumult Hype watches your every move, automatically creating keyframes as needed. Or, if you’d prefer to be more hands-on, manually add, remove, and re-arrange keyframes to fine-tune your content. It is easy to create natural curves by clicking and dragging on an element’s motion path to add bézier control points.

8. Purple Animator

With Purple, you will create beautiful HTML5 animations with ease. Purple animations can be viewed on mobile devices and on your Desktop. Import assets directly from graphics applications like Adobe® Photoshop® or Pixelmator and start creating at once! Preview animations made with Purple directly on the iPad device and make your apps, magazines, games and websites even more exiting.

9. GSAP

GSAP is a suite of tools for scripted, high-performance HTML5 animations that work in all major browsers. No other library delivers such advanced sequencing, API efficiency, and tight control. Stop wrestling with cumbersome CSS animations, stuttery jQuery.animate() calls, or a system that limits your creativity. Use animation to tell a story in a rich way rather than settling for a few fades and slides.

10. Mugeda

Mugeda is a powerful browser based Html5 animation tool that comes with all sorts of features such as analytics, templates etc. It’s toolkit will help you create content friendly with ads, approach cross platform optimization and play with the latest JavaScript technologies.

11. Radiapp

Radi is a complete visual design application targeting web with 100% standard and human-readable HTML + JavaScript code. It has built-in tools for creating/editing graphics (they can be imported too) and generating animations with canvas output that work in all modern browsers including mobile. There are ready-to-use filters + effects and you can always add your own code to create more customized stuff. Radi has a very short learning curve as it is like a mixture of well-known image editing and animation tools but with the friendliness of web technologies.

12. Google Web Designer

Google has released a new tool, named Google Web Designer, for creating interactive HTML5 sites and ads. It is a modern WYSIWYG where you don’t need to dive into the code but use the features to get the output and the tools are mostly design-oriented. However, the code generated is always there and it can be edited or tweaked and the result is displayed automatically. The tool comes with ready-to-use settings for designing Google-powered ads (DocubleClick, AdMob) that will work on any device.
There are built-in components like 360 or carousel galleries, 油Tube video embedding and more. A timeline exists for animations and anything can be drawn with a pen tool (not limited to shapes).

13. BLYSK

One of the best and powerful tool for creating HTML5 animations. Just like Adobe Edge and Tumult Hype, it is based on a timeline making your job much easier.

14. Hippo Studios

Hippo Animator is a powerful yet easy to learn editor. It’s simple to create great looking animation quickly. Hippo Animator exports a single scalable HTML page and a folder of images. You only need one line of code to add the animation to your own web pages. It’s as simple as we can make it. The HTML animation is cross browser, search friendly and doesn’t require any browser plugins.

15. Sencha Space

Sencha Space is an advanced platform for securely deploying mobile apps and delivering a consistent, elegant, mobile user experience to end-users. Users can launch any mobile web app, or HTML5 app in a secure, managed environment.

16. Nodefire

NodeFire is a responsive focused HTML5 animator for your website. Emulate desktop, tablet, and mobile devices while in design mode. Create one animation that automatically responds to fit any environment. Harness unparalleled animation and interaction features. All powered by NodeFire’s lightning fast, no dependencies, 18K (Gzip) script library.

17. Modernizer

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites. It lets you target specific browser functionality in your stylesheet by adding classes to your element. What?s easy is you don?t need to actually write any Javascript code to use this.

18. Motion Canvas

Motion Canvas is a complete HTML5 Canvas animation system, Motion Canvas enables designers to create vivid drawings. It gives designers the power of shapes, bezier curves (pen tool) and text rendering to create interactive masterpieces. Creating animations within Motion Canvas is easy. It provides an intuitive, industry-standard key-frame animation system.

19. Kinetic JS

KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

20. Koolmoves

KoolMoves is a Flash, Html5, and AVI authoring tool for creating text and image effects, games, navigation buttons, slide shows, media players, animated characters, and entire web sites. KoolMoves provides AS1 and AS3 action scripting capability and exports as Flash SWF, Html5, AVI, SVG, and frames for animated gifs. You can select from a large library of effects and components, import vector clipart, attach audio, fill shapes with color gradients or images, and add actions to buttons and frames.