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; /*延迟时间*/}
{-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 3s; /*动画持续时间*/
-webkit-animation-iteration-count: 1; /*动画次数*/
-webkit-animation-delay: 0s; /*延迟时间*/}
通过上面的代码即可实现淡入淡出的动画效果，代码具体的含义已在注释中注明。
-----------------------------------------------------------------------------
完整代码例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS3</title>
<style>
@-webkit-keyframes fadeInOut {
0% {
opacity:1;
}
25% {
opacity:0;
}
50% {
opacity: 0;
}
75% {
opacity:1;
}
}
.anim_fade_image {
position:absolute;
-webkit-animation-name: fadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 12s;
-webkit-animation-direction: alternate;
}
</style>
</head>
<body>
<img class="anim_fade_image" src="http://www.sieye.cn/lvyoujn/2006/2006003b.jpg" />
<img src="http://www.sieye.cn/lvyoujn/2006/2006004b.jpg" />
</body>
</html>
可这样子的淡入淡出只能有两张图片。