.show{
	opacity: 1;
	transition: all 2s ease-in;
}

.hide{
	opacity:0;
	animation: hide-item 2s ease-in forwards;
}
@keyframes hide-item
{
	0%
	{
		opacity: 1;
		color: red;
	}
	
	50%
	{
		opacity: 0.5;
		color: green;
	}
	100%
	{
		opacity:0;
		color: blue;
	}
}

这里在.show里面用的是transition 在.hide里面用的是animation。
结果在隐藏的时候有动画效果，在显示的时候就直接显示了