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 动画技术