実現したいこと
アニメーションで文字を1行ずつ時間をずらして表示させたい
前提
https://codepen.io/jonnowitts/pen/YQLRYE
ハンバーガーメニューをこちらのサイトと同じような動きにしたいのですが、
現在3行とも同時に表示しています。
該当のソースコード
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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/06/01 01:53