CSS 图片淡入淡出效果

html源码：

css源码：
.fadeImg {
width: 100px;
height: 100px;
background: red;
-webkit-animation: fadeinout 5s linear forwards;
animation: fadeinout 5s linear forwards;
}

@-webkit-keyframes fadeinout {
0%{ opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 0; }
}

@keyframes fadeinout {
0%{ opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 0; }
}

上面显示的是淡出的效果，如果是淡入的效果：
@-webkit-keyframes fadeinout {
0%{ opacity: 0; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}

@keyframes fadeinout {
0%{ opacity:0; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}

如果是淡入之后再淡出：
@-webkit-keyframes fadeinout {
0%,100%{ opacity: 0; }
50% { opacity:1; }
}

@keyframes fadeinout {
0%,100%{ opacity: 0; }
50% { opacity:1; }
}