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