複数の要素にkeyframesを指定してヌルヌル動かしたい

前提・実現したいこと

元々ズームされた複数の画像がタイミングをずらして落ちてくるようなアニメーションを再現したいと考えております。

cssのanimetionを利用して再現しようと考えております。

発生している問題・エラーメッセージ

実装してみたのですが、
動作がカクついてしまいます。

これをヌルヌルと動かしたいのですが、
なかなか改善ができず、改善方法があればご教授いただけると嬉しいです。

該当のソースコード

HTML
1<div class="mv">
2    <img class="anime1" src="img1" alt="">
3    <img class="anime2" src="img2" alt="">
4    <img class="anime3" src="img3" alt="">
5    <img class="anime4" src="img4" alt="">
6</div>

CSS
1.mv{
2    height: 100vh;
3    width: 100%;
4    position: relative;
5}
6.mv img{
7    position: absolute;
8    z-index: 1;
9    left: 50%;
10    bottom: 20px;
11    opacity:0;
12    will-change: animation;
13    -webkit-backface-visibility:hidden;
14    backface-visibility:hidden;
15    perspective: 1000;
16}
17.mv .anime1 {
18    -webkit-animation: scale-down-top 6s ease-in 1s forwards;
19    animation: scale-down-top 6s ease-in 1s forwards;
20}
21.mv .anime2 {
22    -webkit-animation: scale-down-top 5s ease-in 2s forwards;
23    animation: scale-down-top 5s ease-in 2s forwards;
24}
25.mv .anime3 {
26    -webkit-animation: scale-down-top 4s ease-in 3s forwards;
27    animation: scale-down-top 4s ease-in 3s forwards;
28}
29.mv .anime4 {
30    -webkit-animation: scale-down-top 3s ease-in 4s forwards;
31    animation: scale-down-top 3s ease-in 4s forwards;
32}
33
34//アニメーション
35@keyframes scale-down-top {
360% {
37    -webkit-transform:translate(-50%,2%) scale(2);
38            transform:translate(-50%,2%) scale(2);
39    -webkit-transform-origin: 50% 0%;
40            transform-origin: 50% 0%;
41            opacity: 0.2;
42}
4310% {
44            opacity: 0.5;
45}
4635% {
47    -webkit-transform:translate(-50%,2%) scale(1);
48            transform:translate(-50%,2%) scale(1);
49    -webkit-transform-origin: 50% 0%;
50            transform-origin: 50% 0%;
51            opacity: 1;
52
53}
5472% {
55    -webkit-transform:translate(-50%,2%) scale(1);
56            transform:translate(-50%,2%) scale(1);
57    -webkit-transform-origin: 50% 0%;
58            transform-origin: 50% 0%;
59            opacity: 1;
60}
61100% {
62    -webkit-transform:translate(-50%,0%) scale(1);
63            transform:translate(-50%,0%) scale(1);
64    -webkit-transform-origin: 50% 0%;
65            transform-origin: 50% 0%;
66            opacity: 1;
67
68}
69}