svgのマスクされた中身の画像をアニメーションで動かしたい

結論から申し上げますと下記のようなサイトのメインビジュアルの画像のようにゆっくりと横に動かすようにしたいのです。
医療法人ハートフル

しかし現状私が記したコードでは、中の画像が動いているのではなく、マスク画像が中の画像と一緒に横に動いている状況です。中身の画像に設定したimageタグをanimationで動かせばいいのかと思っていたのですが、そうではなかったようです。

何とかマスク画像の位置を動かさずに、中身の画像だけsvgで動かすようにはできないでしょうか。

以下、これまで記述したコードになります。

svg.check.html

<svg class="p-svg" width="0" height="0" xmlns="http://www.w3.org/2000/svg"> <clipPath id="svgPath" > <!-- <path d="M2.31653 29.8488C34.6911 1.03062 171.869 -19.6128 229.485 29.8488C287.101 79.3104 295.758 149.274 229.485 186.027C163.213 222.78 40.0184 208.13 2.31653 186.027C-35.3854 163.924 -30.058 58.6669 2.31653 29.8488Z"> --> <path d="M0 0H713.736C713.736 0 991.081 495.469 713.736 653.562C494.913 778.297 0 653.562 0 653.562V0Z"> </clipPath> </svg> <svg class="mask" viewBox="0, 0, 837, 709" width="837" height="709"> <image xlink:href="images/26883668_m.jpg" clip-path="url(#svgPath)" width="1920" height="1280" class="c-maskImage"/> </svg>

_media.scss

.c-maskImage{ animation: horizontal 5s 1s forwards linear; } @keyframes horizontal { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }

よろしくお願いいたします。