几行代码实现页面的淡入特效（css3）

已经运用到自己的网站上去了，演示就是本站可以看到效果 本站在#content实现，利用CSS3动画属性“@keyframes ”可实现动态特效，大部分主流浏览器都支持，在火狐24版、chrome29版、IE10中测试通过。IE9以下浏览不支持此特效。

	下面样式可以直接添加到style样式文件中……

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

@ keyframes fade - in {         0 % { opacity : 0 ; } /*初始状态 透明度为0*/         40 % { opacity : 0 ; } /*过渡状态 透明度为0*/         100 % { opacity : 1 ; } /*结束状态 透明度为1*/    }    @ - webkit - keyframes fade - in { /*针对webkit内核*/         0 % { opacity : 0 ; }         40 % { opacity : 0 ; }         100 % { opacity : 1 ; }    }    #content {  //换为自己主题的区域ID        animation : fade - in ; /*动画名称*/         animation - duration : 1.5s ; /*动画持续时间*/         - webkit - animation : fade - in 1.5s ; /*针对webkit内核*/    }

另外，可针对 页面 某部分延长显示时间，比如侧边栏，再加上一句：

1 2 3 4 5

#sidebar {          animation : fade - in ;         animation - duration : 4s ;         - webkit - animation : fade - in 1.5s ;    }

同理，可对页面不同的部分设定不同的淡入显示时间， 实现 分段显示。

演示效果请看本站了……

	关于@keyframes的扩展讲解

浏览器支持

目前浏览器都不支持 @keyframes 规则。

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

定义和用法

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：

1 2 3 4

@ keyframes testanimations {      from { opacity : 1 ; }      to { opacity : 0 ; } }

其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。

原文地址和演示：http://www.newsky365.com/webcssdanru/