animation css逐渐消除 css3动画控制元素淡入淡出显示效果

/*定义公共淡入淡出效果 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;

}