动效 JS 知识备份

1，animateplus

CSS and SVG animation library

2，Dynamics.js

Dynamics.js

3，uilang

uilang

4，animateplus

5，玩转HTML5移动页面（动效篇）

6，snabbt.js

Minimalistic animation library in javascript

---

网页动画理论

开始做动画前还想了解更多信息？没问题。这儿有一大堆聪明人的建议，其中一些还对网页动画的未来作了预测。
Animation Principles for the Web 这篇文章围绕CSS动画。描绘了运动物体背后最基础的原则。仔细看看他们网站的其余案例、教程和邮件课程。（不过，邮件课程是收费的）
Invisible animation Steven Fabre告诉我们动画要如何像设计本身那样，基本不可见。读了之后你就不会觉得这句话矛盾。快去吧。
Will animation be the big UI trend of 2015? 对于动画的指导原则做出了一些很棒的推测性的阐释，如果再短点就好了。
The Role of Animation in Web Design 另一则简单基础的建议。短小精悍，当你每次需要做出动画方面的重要抉择时，都值得回来重读一遍。可以将它作为记录思想的便条。
The State Of Animation 2014 Rachel Nabors出品，一套非常棒的总览，（或多或少）讲述了网页动画是如何完成的。你还会见到她的名字好几次，因为她是这个领域的专家。
Five Ways to Animate Responsibly Rachel Nabors的又一篇干货（我早说过还会看到她的作品……）。这篇中，她重温了5种加入动画同时不会疏远用户的方法。
教程
关键在这里！学习更多你想都没想过的CSS属性。学习easeIn和easeOut的区别——其实我也要查阅一下。
4 Simple CSS3 Animation Tutorials 跳过简介部分，直达干货，如果这样符合你习惯。我在下面还包含了很多引导性的教程。如果你想直接看一些基础代码，请由此开始。
A Beginner’s Introduction to CSS Animation 正如标题所描述的。只要你有基础的HTML和CSS知识，就能跟上这个教程，掌握一些有用的基于CSS的动画知识。
The Guide To CSS Animation: Principles and Examples Smashing Magazine为读者奉献了大量的基本动画。这是简单却有价值的知识。
Flashless Animation 又一篇很好的CSS动画介绍，传奇的Rachel Nabors出品。没错，它是2012年的文章，但那时与现在的唯一区别，是她提供的技巧如今得到了更多浏览器的支持。
Codrops tutorials 我说真的，Codrops的这些家伙，推荐多少次都不为过。他们创作了大量的案例、概念样品、灵感收集，当然还有教程。他们热爱动画，并且做了许多来分享他们的爱好。
这里是一些他们创作的动画相关的教程：
Tilted Content Slideshow
Page Preloading Effect
Sliding Header Layout
Playful Trampoline Effect
How to Create (Animated) Text Fills

CSS3 Transitions, Transforms, Animation, Filters and more! 深入全面的交互教程，大量生动的案例。当你完成了大部分基础教程，可以来这里看看。它给你很多用于练习的创意。
Transitions & Animations 一篇简易CSS动画教程，特别关注transition和相关属性。
Shaking Up The Web With CSS3 (How To Make Links Shake) 重点讲述晃动物体的教程。我是指……看看就知道了。
High Performance Animations 这篇教程由众人爱戴的Paul Lewis和Paul Irish联合创作完成，关注如何在不拖慢浏览器的情况下完成动画。由于这点在移动端尤其重要，很值得一读。
Tutorial: Using animation-fill-mode In Your CSS Animations 在学了这么多让物体运动的方法后，还可以学着处理那些尚未移动、或是运动完成的物体。有时候样式会很棘手，这就是为什么需要animation-fill-mode属性。
Keyframe Animation Syntax css-tricks.com提供的一些非常有用的片段。不记得如何设定keyframe来达成目标？收藏这篇，就再也不用担心了。
A Look Into: Cubic-Bezier In CSS3 Transition 这篇完全是关于时间。我是指动画字面意义的时间。更确切的说，是讲述使用贝塞尔曲线来使动画节奏适中。
弹跳物体！ 我发现两个不同的教程，讲述如何打造弹跳动画。每个都采用了不同的方式，有一些其他所没有的内容。犹豫不决之余，我干脆把两者都放出来。
Create a CSS Flipping Animation CSS Transitions, Transforms & Animations – Flipping Card
Animating CSS3 Gradients 多数动画教程都假定你是要改变物体的几何形体或在页面上的位置。这篇则教你如何改变他们的内部……在本例中是指渐变。
标题图：动画图片，来自Shutterstock
原文链接
作者信息：EZEQUIEL BRUNIEzequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he's not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy. More articles by Ezequiel Bruni

---

原文链接：http://www.webdesignerdepot.com/2015/05/the-ultimate-guide-to-web-animation/
IFEC译者：http://weibo.com/greenzorro
审校：http://weibo.com/greenzorro

来自：UI.cn