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了，并非完全好主意。
小骆驼商队 补充说，很繁琐，每次都要用私有的前缀，我深表苟同……
参考文献
本文出自 传播、沟通、分享，转载时请注明出处及相应链接。
本文永久链接: https://www.nickdd.cn/?p=1013
2条评论
@way to stop smoking
广告位就是需要访问量高有人气就可以了,像个人网站的话一天有个5-10万的PV就很不错了,其它的都没关系,你也可以用Google Adwords这类广告基本没有门槛.
www.uini.net的博主前辈，问个新手问题：如果出售广告位，一般自己网站要有什么的条件才能达到?