html代码：

<div class="demo"></div>

css代码：

/*定义公共淡入淡出效果 fadenum*/

@-webkit-keyframes fadenum{ /*设置内容由显示变为隐藏*/

    0%{opacity: 0;}

    100%{opacity: 1;}

}

@-moz-keyframes fadenum{ /*设置内容由显示变为隐藏*/

    0%{opacity: 0;}

    100%{opacity: 1;}

}

@-o-keyframes fadenum{ /*设置内容由显示变为隐藏*/

    0%{opacity: 0;}

    100%{opacity: 1;}

}

@keyframes fadenum{ /*设置内容由显示变为隐藏*/

    0%{opacity: 0;}

    100%{opacity: 1;}

}

/*元素使用该效果*/

.demo{

    width: 300px;

    height: 200px;

    background: red;

    -webkit-animation: fadenum 4s ease;

    -moz-animation: fadenum 4s ease;

    animation:fadenum 4s ease;

}

注：ease设置为一次性效果，infinite为循环动画

效果图：

1

2

3