我试着让我的动画不是参差不齐它向上旋转等一秒钟它不只是流畅我试着改变左边:和旋转:但它没有改变停止和启动水滴只是向上停止开始移动停止旋转开始移动停止旋转我试着交换部分改变%
.drop {
position: absolute;
top: 35%;
left: 46%;
background: #7cc1ff;
border-radius: 0% 100% 100% 100%;
transform: rotate(45deg);
width: 30px;
height: 30px;
}
.drop {
animation: fall 4s infinite;
}
@keyframes fall {
0% {
width: 30px;
height: 30px;
top: 35%;
left: 46%;
}
10% {
top: 20%;
left: 50%;
}
20% {
top: 15%;
left: 60%;
}
30% {
top: 20%;
left: 70%;
rotate: 100deg;
}
40% {
top: 30%;
left: 80%;
rotate: 190deg;
}
50% {
top: 60%;
left: 80%;
}
60% {
top: 70%;
left: 80%;
}
70% {
top: 80%;
left: 80%;
}
80% {
top: 100%;
left: 80%;
}
90% {
top: 100;
opacity: 0;
left: 80%;
}
100% {
top: 100;
opacity: 0;
left: 46%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<div class="drop"></div>
</html>