关于网页里的动画（先写了放着，并不全面）

在 css3 未出世之前，jquery 的 animate 方法被我们这些新手极其青睐，稍稍一玩就感觉牛逼死了，交互动效就是我们装逼的利器。

虽然也曾有一段时间特别反感 jquery 把各种属性都堆在 html 里面，然后一有动画整个代码控制器就开始发疯似的闪现数字，还为会不会崩坏而捏一把汗。

而且用起来非常简单，什么动画时间/延时/暂停和回调都相当方便，很后期了才接触到了 queue 队列，也是大大地吃了一精。

$(selector).animate(styles,speed,easing,callback)

 

后来 CSS3 就杀出来了，最开始吸引我的是 transition，当时做 :hover 和 :focus 交互的时候变得相当有趣。

接着是 transform，让动画有了旋转/拉伸等功能，想着当年想做个旋转还专门下个插件来着，感谢技术进步啊。

而 animation 在当初实在懒得做兼容性，每个属性都得带前缀好烦的，所以迟迟没有去接触（现在好多了）。

而随着做响应式页面更多后，发现 transition 并不能满足我的很多设计创意了，所以才领略到 infinite / backwards / step() 这些属性的强大魅力。

然后配合上 事件+addClass 比 $.fn.animate 多出来了不知道多种动画形态。

但是，不太爽的是，它的回调方法 transitionend 和 animationend 如果点快了那就要尴尬了，没有一个很好的暂停方法。

 

后来越来越多的人去说 CSS3 的渲染如何如何呀，我竟然也跟着信了，毕竟没有深入研究过动画真实的性能问题。

主要观念是： $.animate 会不断的操作更改 dom，而 animation 只是在浏览器自己的不断刷新中顺带完成动画。

而 $.transit 这股清流瞬间就将我俘虏了，集合了上面两者的优势，没见过的可以去搜搜看，主要是将修改 dom 变成了 transition 过渡，提高了很棒的性能。

 

SMIL 是作用于 SVG 的一种动画方式，非，常，屌。

甚至在 animation 的基础上还能加上跟随路径，这种质变是如今难以比拟的。

可惜写 SVG 即便有专门的编辑器或绘图器本来就很麻烦了，再带上 <animateTransform> 说实话我有些不情愿。

而且它就像 html 一样，用 css 和 js 再加上 smil，强大的效果加可控性，让我不心动都不行。

 

再后来无意间搜到 $.velocity 这个类似物，标语就就写的是比 jquery/css/transit 都要快，莫名呼吸加重了一下，由衷地感叹世界进步得真快。

也让我想起了曾经在论坛里看过的一句话，现在前端还没有像后端那样遇到性能问题，所以将来是个考验算法的时代。