CSS3新增动画属性“@-webkit-keyframes”，从字面就可以看出其含义——关键帧，这与Flash中的含义一致。利用CSS3制作动画效果其原理与Flash一样，我们需要定义关键帧处的状态效果，由CSS3来驱动产生动画效果。下面讲解一下如何利用CSS3制作淡入淡出的动画效果。具体实例可参考刚进入本站时的淡入效果。
1. 定义动画，名称为fadeIn@-webkit-keyframesfadeIn{
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;/*延迟时间*/
}
通过上面的代码即可实现淡入淡出的动画效果，代码具体的含义已在注释中注明。
