position+opacity组合制作图片淡入淡出效果

图片淡入淡出效果的制作逻辑：

第一步、position使图片重叠；（在这里只根据元素的添加顺序确定层的优先级，不用z-index）

第二步、opacity设置图片的透明度。

第三步、keyframes实现改变透明度的动画效果

CSS代码：
@-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;
}
HTML代码：
<img class="trans_fade_image" src="http://image.zhangxinxu.com/image/study/p/s200/ps6.jpg" />
<img src="http://image.zhangxinxu.com/image/study/p/s200/ps4.jpg" />

css代码中

@-webkit-keyframes fadeInOut {
    0% {
        opacity:1;
     }
    25% {
        opacity:0;
    }
    50% {
        opacity: 0;    
    }
    75% {
        opacity:1;
    }
}

的理解是这样的：

原文链接与演示地址：http://www.zhangxinxu.com/study/201011/css3-transition-animate-demo-10.html