Putting animation in HTML - css

Question

I want to create an animation with falling objects, with different start time and different falling speed. The objects stop falling when they reach the position in the image (see below).
What's the best way to actually animate this? Should I use Adobe animator/After effects or is CSS enough?
I'm open for suggestions.
The black lines are going down even when the object stop (please ignore the shadows beneath the object)

Answer 1

Try something like this
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="https://i.stack.imgur.com/NDtpp.png" id="abc" height="50" width="50"/>
<img src="https://i.stack.imgur.com/NDtpp.png" id="def" height="50" width="50"/>
<img src="https://i.stack.imgur.com/NDtpp.png" id="ghi" height="50" width="50"/>
Code for background-animation
#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>