html代碼：

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

css代碼：

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

@-webkit-keyframes fadenum{ /*設(shè)置內(nèi)容由顯示變?yōu)殡[藏*/

????0%{opacity: 0;}

????100%{opacity: 1;}

}

@-moz-keyframes fadenum{ /*設(shè)置內(nèi)容由顯示變?yōu)殡[藏*/

????0%{opacity: 0;}

????100%{opacity: 1;}

}

@-o-keyframes fadenum{ /*設(shè)置內(nèi)容由顯示變?yōu)殡[藏*/

????0%{opacity: 0;}

????100%{opacity: 1;}

}

@keyframes fadenum{ /*設(shè)置內(nèi)容由顯示變?yōu)殡[藏*/

????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設(shè)置為一次性效果，infinite為循環(huán)動(dòng)畫(huà)

效果圖：

1

2

3