CSS3中动画效果的应用

不少人都已经在用CSS3中的动画了，但很多仅仅用在 某个元素的 hover上
其实，配合脚本的话，可以做到更多的动画效果，并且可以在很大程度上抛弃各种动画库。

先前一博客《用HTML5代替PPT》中，
我的各种动画效果就完全使用了CSS3的动画效果而不再使用jQuery的动画了。
点击查看展示

设置CSS

*{
-webkit-transition-duration:.15s;
-moz-transition-duration:.15s;
transition-duration:.15s;
-webkit-transition-timing-function:ease-out;
-moz-transition-timing-function:ease-out;
transition-timing-function:ease-out;
}

也就是设置了所有动画效果的持续时间为150毫秒，以及动画效果的样式为ease-out。

关于时间

根据我自己亲身实践，我能接受的动画效果时间是在150毫秒附近，
再短觉得一闪而过，再长我就觉得拖沓冗余。
这个150毫秒仅仅是经验参数，没有任何科学依据
仅供各位参考。

但是这个也有例外，比如例子中幻灯片的翻页过程，
由于幻灯片比较大，翻页过程如果时间太短，效果也不好
所以对于这种几乎整个页面变化的情况，我设置了动画时长为300毫秒
比通常的翻了一倍。甚至到400毫秒也没觉得冗长。

所以一般对于面积较小的元素，动画效果维持在150毫秒左右
面积较大的动画，适当延长时间。

关于效果

动画效果我个人最喜欢ease-out，最不拖沓，有动感。
其他效果看着总觉得恶心。
比如linear看起来就很死板，而ease-in又感觉不伦不类。

关于是否使用*选择器

这个我已经另写博客阐述观点 真的还需要reset.css么？

关于动画

这是针对所有元素的任何的CSS变动都会产生动画，
包括背景色，边框色，宽度高度，内外边距的变化等等等等。
实际上光颜色的动画改变就已经比jQuery默认效果强了，
jQuery如果要实现颜色动画需要附加一个插件 jQuery Color

脚本产生动画

不仅仅是hover伪类其效果，
任何通过脚本改变元素的CSS参数都会产生动画。

为此，我在页面脚本一开始就加入

var page=window.location.hash.replace(“#slide-“,””)||1;
$(“#slides”).css({“margin-top”:(1080*(1-page))});

这段代码的作用就是通过地址栏的hash，来改变幻灯片的页数。
你可以尝试访问这个页面，注意地址最后的hash部分：
http://shawphy.github.com/share/2010/presentation.html#slide-2
这个地址会直接把你带到第2页。

可以看到，代码中仅仅是设置了元素CSS的margin-top值，本身并没有动画
而由于先前的CSS设置，通过js改变margin-top值也会有动画效果
这种原生动画效果我不确定是不是会比js产生的效率高
我个人感觉在Firefox 4下动画效果很不流畅，但Chrome 下很流畅。

因此一定程度上，未来可以放弃脚本库中的动画了。
或者，甚至脚本库中也会运动CSS动画来实现功能。

缺点

不提供回调函数，不能按照顺序执行
又要使用大量setTimeout了，并非完全好主意。
小骆驼商队 补充说，很繁琐，每次都要用私有的前缀，我深表苟同……

参考文献

你需要知道的CSS3 动画技术