大部分網頁對於一些資訊的提醒都是使用了一個淡出淡入的顯示效果。本人在開發中使用定時器實現淡出淡入的效果時遇到了一個嚴重問題，在一些瀏覽器上清楚定時器時有時候無效果，但使用debugger跟蹤又沒有事，最後實現沒有辦法，想到了CSS3提供的動畫效果，於是就使用CSS3來實現提示資訊的淡出淡入效果。

1.使用@keyframes 建立淡出淡入效果。

@keyframes fadeio {
    /*設定內容由顯示變為隱藏*/
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes fadeio {
    /*設定內容由顯示變為隱藏*/
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fadeio {
    /*設定內容由顯示變為隱藏*/
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes fadeio {
    /*設定內容由顯示變為隱藏*/
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
 

2.使用animation給需要實現淡出淡入的樣式新增該功能; 

.fadenum {
    animation: fadeio 2s infinite;
    -webkit-animation: fadeio 2s infinite;
    -moz-animation: fadeio 2s infinite;
    -o-animation: fadeio 2s infinite;
}