* {
	margin:0;
	padding:0;
}
.sky {
	position:relative;
	width:100%;
	height:60vh;
	background: linear-gradient(rgb(196, 228, 253),white);	
}
.grass {
	width:100%;
	height:40vh;
	background: linear-gradient(white,rgb(148, 190, 89));
}
.cloud {
	position:absolute;
	background-color:white;
	border-radius:50%;
	box-shadow:0 0 3px 3px white;
}
.cloud1 {	
	top:30px;
	left:600px;
	width:90px;
	height:90px;
	/*background-color:rgba(255, 255, 255, .8);*/
	animation:moveOne 10s linear infinite ;
}
.cloud2 {	
	top:200px;
	left:700px;
	width:90px;
	height:90px;
}
.cloud3 {	
	top:100px;
	left:900px;
	width:120px;
	height:120px;
	 /*filter: alpha(opacity=40);*/
}
.cloud4 {	
	top:160px;
	left:1200px;
	width:70px;
	height:70px;
}
.cloud5 {	
	top:40px;
	left:1400px;
	width:90px;
	height:90px;
}
.cloud::before {
	display:block;
	content:"";
	border-radius:120px;
	background-color:white;
	box-shadow:0 0 3px 3px white;
}
.cloud1::before,
.cloud2::before,
.cloud5::before {	
	width:70px;
	height:55px;	
	transform: translate(-42px,32px)  rotate(50deg);
	animation:moveOne 10s linear infinite ;	
	/*background-color:rgba(255, 255, 255, .8);*/
}
.cloud3::before {	
	width:92px;
	height:68px;	
	transform: translate(-52px,45px)  rotate(50deg);	
}
.cloud4::before {	
	width:55px;
	height:35px;	
	transform: translate(-32px,30px)  rotate(50deg);	
}
.cloud::after {
	display:block;
	content:"";
	border-radius:80px;
	background-color:white;
	box-shadow:0 0 3px 3px white;
}
.cloud1::after,
.cloud2::after,
.cloud5::after {	
	width:150px;
	height:40px;	
	transform: translate(-50px,-10px)  rotate(1deg);	
	animation:moveOne 10s linear infinite ;
	/*background-color:rgba(255, 255, 255, .8);*/
}
.cloud3::after {	
	width:190px;
	height:50px;	
	transform: translate(-60px,-8px)  rotate(1deg);	
}
.cloud4::after {	
	width:115px;
	height:30px;	
	transform: translate(-37px,0px)  rotate(1deg);	
}

@keyframes moveOne {
	0% {transform: translate(-50px,-10px)  rotate(1deg);}	
	25% {transform: translate(-2000px,-10px)  rotate(1deg);}
	25% {transform: translate(2000px,-10px)  rotate(1deg);}
	100% {transform: translate(-2000px,-10px)  rotate(1deg);}
}

以上那段代码是实现不了的。。。我就是想问问 像以上这种靠translate定位的情况 要如何设置动画关键帧啊

非常感谢！