html {
	height:100%;
}
body {
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	background:rgb(196,14,14);
	margin:0 auto;
}
main {
	width:400px;
	height:230px;
	border:10px solid white;
	position:relative;
	cursor:pointer;
}
main div {
	width:100%;
	height:100%;
	position:absolute;
	font-size:100px;
	text-align:center;
	line-height:230px;
	font-family:黑体;
	font-weight:bold;
}
.first {
	color:white;
}
.second {
	width:0px;
	position:absolute;
	overflow:hidden;
	background:white;
	transition:4s;
	animation:one 5s ease-in-out 1;
	animation-fill-mode:both;
}
.seconds {
	color:rgb(196,14,14);
	width:400px;
}
@keyframes one {
	0% {
	width:0px;
}
25% {
	width:50px;
}
50% {
	width:150px;
}
100% {
	width:400px;
}
}.three {
	width:0px;
	background:rgb(224,9,9);
	overflow:hidden;
	right:0;
	animation:two 5s linear 1;
	animation-fill-mode:both;
	animation-delay:5s;
}
@keyframes two {
	0% {
	width:0px;
}
100% {
	width:200px;
}
}.threes {
	width:400px;
	color:white;
	position:absolute;
	animation:twos 5s linear 1;
	animation-fill-mode:both;
	animation-delay:5s;
}
@keyframes twos {
	0% {
	left:-400px;
}
100% {
	left:-200px;
}
}