css3中制作淡出淡入动画

大部分网页对于一些信息的提醒都是使用了一个淡出淡入的显示效果。本人在开发中使用定时器实现淡出淡入的效果时遇到了一个严重问题，在一些浏览器上清楚定时器时有时候无效果，但使用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;
}