/* 从左侧渐入 */
    div {
	background-color:rgb(138,188,209);
	width:600px;
	height:100px;
	margin:10px;
}
.fade {
	opacity:0;
	transform:translateX(-600px);
}
.left-in {
	/* 定义动画 */
      animation-duration:1000ms;
	/* 动画时间 */
      animation-name:left-in;
	/* 关键帧名字 */
}
/* 定义关键帧 */
    @keyframes left-in {
	0% {
	opacity:0;
	transform:translateX(-600px);
}
100% {
	opacity:1;
	transform:translateX(0px);
}
}.right-in {
	/* 定义动画 */
      animation-duration:1000ms;
	/* 动画时间 */
      animation-name:right-in;
	/* 关键帧名字 */
}
/* 定义关键帧 */
    @keyframes right-in {
	0% {
	opacity:0;
	transform:translateX(600px);
}
100% {
	opacity:1;
	transform:translateX(0px);
}
}