css - 将动画放入 HTML 中

Question

我想创建一个带有下落物体的动画，具有不同的开始时间和不同的下落速度。物体到达图像中的位置时停止下落(见下图)。

实际制作动画的最佳方式是什么？我应该使用 Adob​​e animator/After effects 还是 CSS 就足够了？我愿意接受建议。

即使物体停止，黑线也在下降(请忽略物体下方的阴影)

Answer 1

尝试这样的事情

 
img {
transition: all 5s;
top: 0;
position: absolute;
 
}
img#abc {
left: 50px;    
 
}
img#def {
left: 120px;    
 
}
img#ghi {
left: 180px;    
 
}

img.abc {

transition: all 5s 1.5s;
top: 150px;
}
img.def {
transition: all 3s 0.5s;
top: 175px;
}
img.ghi {
transition: all 4s 1s;
top: 165px;
}

<script>
function myFunction() {
var element = document.getElementById("abc");
element.classList.add("abc");
var element = document.getElementById("def");
element.classList.add("def");
var element = document.getElementById("ghi");
element.classList.add("ghi");
}

</script>
<button onclick="myFunction()">Try it</button> 
<img src="/image/NDtpp.png" id="abc" height="50" width="50"/>
<img src="/image/NDtpp.png" id="def" height="50" width="50"/>
<img src="/image/NDtpp.png" id="ghi" height="50" width="50"/>

背景动画代码

 
   @keyframes animatedBackground {
		from { background-position: 0 100%; }
		to { background-position: 0 0; }
	}
	@-webkit-keyframes animatedBackground {
		from { background-position: 0 100%;; }
		to { background-position: 0 0; }
	}
	@-ms-keyframes animatedBackground {
		from { background-position:0 100%;; }
		to { background-position: 0 0; }
	}
	@-moz-keyframes animatedBackground {
		from { background-position: 0 100%;; }
		to { background-position: 0 0; }
	}

	#animate-area	{ 
		width: 100%; 
		height: 400px; 
		background-image: url(https://image.ibb.co/kuXpay/static.png);
		background-position: 0 100%;
		background-repeat: repeat-y;

		animation: animatedBackground 20s linear infinite;
		-ms-animation: animatedBackground 20s linear infinite;
		-moz-animation: animatedBackground 20s linear infinite;
		-webkit-animation: animatedBackground 20s linear infinite;
	}

<div id="animate-area">
</div>