CSSを使用して横方向に自動で無限スクロールする方法について

実現したいこと

掲載の件を実現したいです。

発生している問題・分からないこと

最後の画像(2周目用の4枚目)を「4´」とします。
アニメーション自体は実行出来ているのですが、丁度2周目で4´が右側から現れ表示されたあたりで4´が一番左に瞬時に移動します。(他の画像もそのまま左に寄せられます。)

おかしい個所はないような気もするのですが、解決策分かる方教えてください。

該当のソースコード

tailwind.config.js
1/** @type {import('tailwindcss').Config} */
2export default {
3  content: [
4    "./index.html",
5    "./src/**/*.{js,ts,jsx,tsx}",
6  ],
7  theme: {
8    extend: {
9      animation: {
10        'marquee': 'marquee 5s linear infinite',
11      },
12      keyframes: {
13        'marquee': {
14          '0%': { transform: 'translateX(0)' },
15          '100%': { transform: 'translateX(calc(-100% / 2))' }
16        }
17      }
18    },
19  },
20  plugins: [],
21}

export const ScrollingImage = () => {

  return (
    <div className="overflow-hidden">
      <ul className="animate-marquee flex">
        <li className="list-none flex-shrink-0"><img src="/public/UsageFlow/Construction.jpeg" alt="" className="h-44 w-72 object-cover" /></li>
        <li className="list-none flex-shrink-0"><img src="/public/UsageFlow/Consultation.jpeg" alt="" className="h-44 w-72 object-cover" /></li>
        <li className="list-none flex-shrink-0"><img src="/public/UsageFlow/Estimate.jpeg" alt="" className="h-44 w-72 object-cover" /></li>
        <li className="list-none flex-shrink-0"><img src="/public/UsageFlow/Plan.jpeg" alt="" className="h-44 w-72 object-cover" /></li>
        <li className="list-none flex-shrink-0"><img src="/public/UsageFlow/Construction.jpeg" alt="" className="h-44 w-72 object-cover" /></li>
        <li className="list-none flex-shrink-0"><img src="/public/UsageFlow/Consultation.jpeg" alt="" className="h-44 w-72 object-cover" /></li>
        <li className="list-none flex-shrink-0"><img src="/public/UsageFlow/Estimate.jpeg" alt="" className="h-44 w-72 object-cover" /></li>
        <li className="list-none flex-shrink-0"><img src="/public/UsageFlow/Plan.jpeg" alt="" className="h-44 w-72 object-cover" /></li>
      </ul>
    </div>
  );
};