CSS3新增动画属性“@-webkit-keyframes”，从字面就可以看出其含义——关键帧，这与Flash中的含义一致。

利用CSS3制作动画效果其原理与Flash一样，我们需要定义关键帧处的状态效果，由CSS3来驱动产生动画效果。

下面讲解一下如何利用CSS3制作淡入淡出的动画效果。具体实例可参考刚进入本站时的淡入效果。

1. 定义动画，名称为fadeIn

@-webkit-keyframes fadeIn {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
50% {
opacity: 0; /*中间状态 透明度为0*/
}
100% {
opacity: 1; /*结尾状态 透明度为1*/
}
}

2.  在ID或类中增加如下的动画代码

#box
{-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 3s; /*动画持续时间*/
-webkit-animation-iteration-count: 1; /*动画次数*/
-webkit-animation-delay: 0s; /*延迟时间*/}

通过上面的代码即可实现淡入淡出的动画效果，代码具体的含义已在注释中注明。

您可能也喜欢：
CSS3 内阴影（inset）代码	超强 CSS3 代码生成器	利用CSS3的Border-radius属性定义边框圆角	在CSS3与Photoshop对比中学习（Text Shadow）字符阴影	CSS3新增特性Multiple backgrounds（多层背景）使用方法
来自无觅网络的相关文章：
20个新CSS3设计效果欣赏 (@shejidaren)	21个值得一看的CSS3教程 (@shejidaren)	实用CSS3属性之 :target伪类实现Tab切换效果 (@shejidaren)	10个详细的CSS3表单制作教程 (@shejidaren)	HTML5和CSS3进阶教程 (@shejidaren)
无觅