为什么我的动画不会动？

来源：2-15 作业题

soso_crazy

2019-02-18 16:41:02

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-15作业</title>
<link href="2-15作业.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="sky">
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
</div>

<div class="grass"></div>
</body>
</html>

*{
margin: 0;
padding: 0;
}

.sky{
width: 100%;
height: 600px;
background: linear-gradient( rgb(196, 228, 253) 0%, rgb(196, 228, 253) 60%,rgb(255,255,255) 100%);
background: -moz-linear-gradient( rgb(196, 228, 253) 0%, rgb(196, 228, 253) 60%,rgb(255,255,255) 100%);
background: -o-linear-gradient( rgb(196, 228, 253) 0%, rgb(196, 228, 253) 60%,rgb(255,255,255) 100%);
background: -webkit-linear-gradient(-90deg, rgb(196, 228, 253) 0%, rgb(196, 228, 253) 60%,rgb(255,255,255) 100%);
position: relative;
}

.sky>.cloud{
position: absolute;
width: 200px;
height: 50px;
top: 80px;
left: 800px;
border-radius: 50px;
background-color: white;
}

.sky>.cloud:before{
content: "";
position: absolute;
left: 80px;
top:-50px;
background-color: white;
width: 110px;
height: 110px;
border-radius: 50%;
}

.sky>.cloud:after{
content: "";
position: absolute;
width: 120px;
height: 50px;
border-radius: 50px;
left: 10px;
top: -10px;
background-color: white;
transform: rotate(50deg);
}

div.cloud:nth-child(1){
top: 75px;
opacity: 0.9;
-webkit-animation: one 11s 0s ease-in infinite;
-moz-animation: one 11s 0s ease-in infinite;
-o-animation: one 11s 0s ease-in infinite;
animation: one 11s 0s ease-in infinite;
}

div.cloud:nth-child(2){
top: 10px;
opacity: 0.8;
transform: scale(0.7);
-webkit-animation: two 11s 14s ease-in infinite;
-moz-animation: two 11s 14s ease-in infinite;
-o-animation: two 11s 14s ease-in infinite;
animation: two 11s 14s ease-in infinite;
}

div.cloud:nth-child(3){
top: 20px;
opacity: 0.8;
transform: scale(0.7);
-webkit-animation: three 11s 29s ease-in infinite;
-moz-animation: three 11s 29s ease-in infinite;
-o-animation: three 11s 29s ease-in infinite;
animation: three 11s 29s ease-in infinite;
}

div.cloud:nth-child(4){
top: 160px;
opacity: 0.7;
transform: scale(0.7);
-webkit-animation: four 11s 43s ease-in infinite;
-moz-animation: four 11s 43s ease-in infinite;
-o-animation: four 11s 43s ease-in infinite;
animation: four 11s 43s ease-in infinite;
}

div.cloud:nth-child(5){
top: 140px;
opacity: 0.7;
transform: scale(0.6);
-webkit-animation: fiv 11s 58s ease-in infinite;
-moz-animation: fiv 11s 58s ease-in infinite;
-o-animation: fiv 11s 58s ease-in infinite;
animation: fiv 11s 58s ease-in infinite;
}

@keyframes one{
from{
right:-160px;
}
to{
right:150%;
}
}
@keyframes two{
from{
right:-200px;
}
to{
right:120%;
}
}
@keyframes three{
from{
right:-300px;
}
to{
right:120%;
}
}
@keyframes four{
from{
right:-200px;
}
to{
right:150%;
}
}
@keyframes five{
from{
right:-200px;
}
to{
right:110%;
}
}

.grass{
width: 100%;
height: 400px;
position: relative;
background: linear-gradient(0deg, rgb(148, 190, 89) 0%,rgb(148, 190, 89) 60%, rgb(255,255,255) 100%);
background: -moz-linear-gradient(0deg, rgb(148, 190, 89) 0%,rgb(148, 190, 89) 60%, rgb(255,255,255) 100%);
background: -o-linear-gradient(0deg, rgb(148, 190, 89) 0%,rgb(148, 190, 89) 60%, rgb(255,255,255) 100%);
background: -webkit-linear-gradient(90deg, rgb(148, 190, 89) 0%,rgb(148, 190, 89) 60%, rgb(255,255,255) 100%);
}

.grass:after{
width: 300px;
height: 300px;
content: "";
background-image: url("辅助资料/rabbit.png");
background-repeat: no-repeat;
background-size: 250px 250px;
position: absolute;
right: 10%;
top: 30%;
}