怎么实现yun1-5的动画？我的有点问题，请老师过目。

来源：2-15 作业题

qq_鸭绿桥第一帅哥_0

2019-03-22 11:31:46

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-15</title>
<link rel="stylesheet" type="text/css" href="css/2-15.css">
</head>
<body>
<!-- 天空 -->
<div class="tian">
<!-- 云朵 -->
<div class="yun yun1-5">
<div class="yun1"></div>
</div>
<div class="yun yun1-1">
<div class="yun1"></div>
</div>
<div class="yun yun1-2">
<div class="yun1"></div>
</div>
<div class="yun yun1-3">
<div class="yun1"></div>
</div>
<div class="yun yun1-4">
<div class="yun1"></div>
</div>
</div>
<!-- 草地 -->
<div class="cao"></div>
</body>
</html>


* {
    margin: 0;
    padding: 0;
}
/* 天空 */
.tian {
    height: 60vh;
    position: relative;
    background: -webkit-linear-gradient(rgb(196, 228, 253), white);
    background: -moz-linear-gradient(rgb(196, 228, 253), white);
    background: -o-linear-gradient(rgb(196, 228, 253), white);
    background: linear-gradient(rgb(196, 228, 253), white);
}
/* 草地 */
.cao {
    height: 40vh;
    background: -webkit-linear-gradient(white, rgb(148, 190, 89));
    background: -moz-linear-gradient(white, rgb(148, 190, 89));
    background: -o-linear-gradient(white, rgb(148, 190, 89));
    background: linear-gradient(white, rgb(148, 190, 89));
}
/* 云朵 */
.yun{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: white;
	transform: translate(900px, 100px);
	/* position: absolute; */
}
.yun:before{
	content: '';
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: white;
	position: absolute;
	transform: scale(0.4) translate(90px, 60px);
}
.yun:after{
	content: '';
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: white;
	position: absolute;
	transform: scale(0.4) translate(-110px, 50px);
}
.yun1{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: white;
	position: absolute;
	transform: translate(-50px, 0px) scale(0.5);
}
.yun1:after{
	content: '';
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: white;
	position: absolute;
	transform: translate(-30px, 50px);
}
div.yun1-1{
	transform: translate(700px, 50px) scale(0.8);   
}
div.yun1-2{
	transform: translate(650px,-180px) scale(0.8);   
}
div.yun1-3{
	transform: translate(1000px,-100px) scale(0.6);
}
div.yun1-4{
	transform: translate(1200px,-350px) scale(0.8);
}
div.yun1-5{
	animation: yun1-5 5s ease-out infinite;
}
@keyframes yun1-5{
    0%{
	transform: translate(900px, 100px);

    }
    40%{
	transform: translate(-300px, 100px);

    }
    80%{
	transform: translate(1500px, 100px);
    }
    100%{
	transform: translate(900px, 100px);

    }
}

写回答

1回答