要素のを拡大縮小するアニメーションがうまくいかない

お世話になっております。

こちらのサイトと同じように、
「色エリアが左から右へ広がってきて、次に左から右へ縮小して消えていく」
というアニメーションを実装したいのですが、うまくいきません。
参考サイト http://loness.jp/collection/2018aw/

やり方

css @keyframesでアニメーションを定義して、画面ロード時にjqueryでaddClassしています。
最初の、左→右拡大の動きはできるのですが、
次の、左→右へ縮小して消える動きが、動きの軸が左になってしまい、左方向へ消えてしまいます。
transform-origin:1;としても、transform-origin:0;が優先されてしまうからかと思います。

現在のコード

HTML
1            <ul class="row">
2                <li class="left invisible">
3                    <img src="./images/ms_left.png">
4                </li>
5                <li class="center">
6                    <img src="./images/ms_center.png">
7                </li>
8                <li class="right">
9                    <img src="./images/ms_right.png">
10                </li>
11            </ul>

css
1/* 色エリア */
2.left::after {
3  content:'';
4  width: 100%;
5  height: 100%;
6  background-color:red;
7  position: absolute;
8  top: 0;
9  left: 0;
10  /* animation-name: scale;
11  animation-duration: 2s; */
12  display: block;
13  transition: all 2s ease-in-out;
14  transition-delay: 0.38s;
15  transform-origin: left;
16  z-index: 1;
17}
18
19.spread {
20  animation-name: spread;
21  transform-origin: 0;
22  animation-duration: 2s;
23}
24
25.shrink {
26  animation-name: shrink;
27  transform-origin: 1;
28  animation-duration: 2s;
29  animation-delay: 4s;
30}
31
32/* 左から右へスプレッド */
33@keyframes spread {
34  from{
35    transform: scaleX(0);
36  }
37
38  to{
39    transform: scaleX(1);
40  }
41}
42
43/* 左から右へシュリンク */
44@keyframes shrink {
45  from {
46    transform: scaleX(1);
47  }
48  to{
49    transform: scaleX(0);
50  }
51}

JavaScript
1    function maisonStyle() {
2        var scroll = $(window).scrollTop();
3        var windowHeight = $(window).height();
4        var target = $('.maison-style');
5        var targetPos = target.offset().top;
6        var scrollAmount = targetPos - windowHeight;
7        // console.log(scrollAmount);
8        // console.log(scroll);
9        if(scroll > scrollAmount + 300) {
10            $('.left').addClass('spread');
11        setTimeout( function() {
12                $('.left').addClass('shrink');
13            },
14        }
15    }