アニメーションで文字を１行ずつ時間をずらして表示させたい

実現したいこと

前提

https://codepen.io/jonnowitts/pen/YQLRYE

ハンバーガーメニューをこちらのサイトと同じような動きにしたいのですが、
現在３行とも同時に表示しています。

該当のソースコード

html
1 <nav class="spmenu" id="spmenu" aria-label="スマホ用メニュー">
2
3            <div class="spmenu__inner">
4                <h1 class="header__logo header__logo--sp"><a href="#top"><img src="img/top-header-logo@2x.png"
5                            alt=""></a></h1>
6                <p class="spmenu__nav-ttl">contents</p><!-- /.spmenu__nav-ttl-->
7                <ul class="spmenu__list">
8                    <li class="spmenu__item"><a href="room.html" class="spmenu__link">お部屋</a></li>
9                    <li class="spmenu__item"><a href="menu.html" class="spmenu__link">お料理</a></li>
10                    <li class="spmenu__item"><a href="hot-spring.html" class="spmenu__link">温泉</a></li>
11
12                </ul><!-- /.spmenu__list -->
13
14                <p class="spmenu__info-ttl">information</p><!-- /.spmenu__nav-ttl-->
15                <div class="spmenu__tel">
16                    <a class="tel-number" href="TEL:000-0000-0000">TEL.000-0000-0000</a>
17
18                </div><!-- /.sumenu__tel-->
19                <address class="spmenu__adress">
20                    <span class="post-code">〒000-0000</span><!-- /.post-code -->
21                    <span class="address">山形県鶴岡市xxxxxxxxxxx</span><!-- /.address -->
22                </address>
23
24                <div class="spmenu__btn__wrapper">
25                    <botton class="reserve-btn spmenu__btn"><a href=#">宿泊予約</a></botton>
26                </div>
27            </div><!-- /.spmenu__inner -->
28
29        </nav><!-- /.spmenu -->
30コード

scss
1.spmenu {
2    position: fixed;
3    z-index: 999;
4    top: 0;
5    right: -120%;
6    overflow-x: hidden;
7    overflow-y: auto;
8    width: 100%;
9    height: 100vh;
10    max-width: 70vw;
11    height: 100%;
12    background: #373331;
13    transition: all 0.6s ease-in-out;
14
15    .spmenu__list {
16        .spmenu__item {
17            .spmenu__link {
18                transform: translate3d(-150px, 0, 0);
19                transition: transform .15s ease-in;
20            }
21        }
22    }
23
24    &__inner {
25        padding: 50px 20px;
26    }
27
28    @include medium {
29        display: none !important;
30    }
31}
32
33/*アクティブクラスがついたら位置を0に*/
34.spmenu.panelactive {
35    right: 0;
36}
37
38
39//レイアウト
40.spmenu__inner {
41    padding-left: 15px;
42    padding-right: 15px;
43    margin-left: auto;
44    margin-right: auto;
45    min-width: 230px;
46    /*ナビゲーション天地中央揃え*/
47    position: absolute;
48    z-index: 999;
49    top: 50%;
50    left: 50%;
51    transform: translate(-50%, -50%);
52}
53
54//タイトル
55.spmenu__nav-ttl,
56.spmenu__info-ttl {
57    opacity: 0.6;
58    color: #fff;
59    font-size: 12px;
60    margin-top: 30px;
61    text-transform: uppercase;
62}
63
64.spmenu__adress,
65.spmenu__tel {
66    color: #fff;
67    margin-top: 15px;
68}
69
70.spmenu__adress span {
71    font-size: 14px;
72    display: block;
73    margin: 0;
74}
75
76.spmenu__tel a {
77    font-size: 16px;
78    font-weight: 700;
79    color: #fff;
80
81    &:hover,
82    &:focus {
83        opacity: 0.7;
84        transition: 0.7s;
85        color: #978F10;
86    }
87}
88
89.spmenu__txt {
90    color: #FFF;
91    font-size: 16px;
92    margin-top: 40px;
93    font-weight: 700;
94}
95
96
97
98.spmenu__item {
99    margin-top: 15px;
100}
101
102.spmenu__link {
103    color: #FFF;
104    margin-top: 15px;
105    font-size: 18px;
106    font-weight: 700;
107    display: block;
108
109    &:focus,
110    &:hover {
111        opacity: 0.7;
112        transition: 0.7s;
113
114    }
115}
116
117.menu--active {
118    height: 100vh;
119    overflow: hidden;
120
121    .spmenu__list {
122        .spmenu__item {
123            .spmenu__link {
124                transform: translate3d(0, 0, 0);
125                transition: transform 500ms ease-out;
126
127                /* Handles items within the slide-out to give them the delayed slide-in */
128                &:first-child {
129                    transition-delay: .2s;
130                }
131
132                &:nth-child(2) {
133                    transition-delay: .3s;
134                }
135
136                &:last-child {
137                    transition-delay: .4s;
138                }
139
140            }
141        }
142
143    }
144
145}

試したこと

自分なりにネットで調べたのですが、よくわかりませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

scss
1    .spmenu__list {
2        .spmenu__item {
3            .spmenu__link {
4                transform: translate3d(-150px, 0, 0);
5                transition: transform .15s ease-in;
6            }
7        }
8    }

上記のコードですが、li要素(.spmenu__item)内のa要素(.spmenu__link)にtransformを設定しています。これはメニュー非表示の状態ですね。

scss
1.menu--active {
2    height: 100vh;
3    overflow: hidden;
4
5    .spmenu__list {
6        .spmenu__item {
7            .spmenu__link {
8                transform: translate3d(0, 0, 0);
9                transition: transform 500ms ease-out;
10
11                /* Handles items within the slide-out to give them the delayed slide-in */
12                &:first-child {
13                    transition-delay: .2s;
14                }
15
16                &:nth-child(2) {
17                    transition-delay: .3s;
18                }
19
20                &:last-child {
21                    transition-delay: .4s;
22                }
23            }
24        }
25    }
26}

上記のコードでメニュー表示の場合の状態を設定していると思われます。
li要素(.spmenu__item)内のa要素(.spmenu__link)は一つしかないので、どのa要素も最後の子要素(:last-child)になるので、transition-delay: .4s;が設定されることになります。よって同時に移動します。

transform, transition関係の設定をa要素ではなく、li要素に設定すればそれぞれ兄弟要素になりますので、先頭要素、2番目要素、最後の要素にそれぞれのtransition-delayが設定されます。

scss
1```scss
2    .spmenu__list {
3        .spmenu__item {
4// 削除     .spmenu__link {
5                transform: translate3d(-150px, 0, 0);
6                transition: transform .15s ease-in;
7// 削除    }
8        }
9    }

scss
1.menu--active {
2    height: 100vh;
3    overflow: hidden;
4
5    .spmenu__list {
6        .spmenu__item {
7// 削除    .spmenu__link {
8                transform: translate3d(0, 0, 0);
9                transition: transform 500ms ease-out;
10
11                /* Handles items within the slide-out to give them the delayed slide-in */
12                &:first-child {
13                    transition-delay: .2s;
14                }
15
16                &:nth-child(2) {
17                    transition-delay: .3s;
18                }
19
20                &:last-child {
21                    transition-delay: .4s;
22                }
23// 削除     }
24        }
25    }
26}