css实现 display: none和display: block的切换动画

话不多说先上代码

.index-detail-list .item-contain{
	display: none;
	overflow: hidden;
	padding: 14px 14px 9px;
	border: 1px solid #ececec;
} 
.index-detail-list .item-contain.active{
	display: block;
	
}
.index-detail-list .item-contain.active ul {
	animation: hideIndex 0.3s;
	-moz-animation: hideIndex  0.3s; /* Firefox */
	-webkit-animation: hideIndex  0.3s; /* Safari and Chrome */
	-o-animation: hideIndex  0.3s; /* Opera */
}
@keyframes hideIndex{
	
	0%{ opacity: 0; transform: translate(800px, 0) }
	100%{opacity: 1; transform: translate(0, 0) }
}

DOM结构大致是这样

				

					
重要通知
					
规章制度
				
				

					

						

							
								关于2017年中秋节国、庆节放假及作息时间调整的通知
								09-18
							
						
						
					
				
				

					

						

							
								规定规定规定规定规定规定规定规定
								09-18
							
						
						
					
				
			

主要就是CSS3 animation动画 具体动画的效果你可以自己自定义啦