前提・実現したいこと
文字を入れ替えた時にもcssのアニメーションをつけたいです。
発生している問題・エラーメッセージ
入れ替わった後、色はついたのですが、アニメーションが適用されずパッと表示されてしまいます。
該当のソースコード
HTML
1 <div class="moji"> 2 <span id="a" >あいうえお</span> <br> 3 <span id="b">かきくけこ</span><br> 4 <span id="c">さしすせそ</span> <br> 5 <span id="d">たちつてと</span> 6 </div>
javascript
1 function tuginomoji(){ 2 a.innerHTML="なにぬねの"; 3 b.innerHTML="はひふへほ"; 4 c.innerHTML="まみむめも"; 5 d.innerHTML="やゆよ"; 6 } 7 8 setTimeout(tuginomoji,3000); 9
CSS
1.moji { 2 position:absolute; 3 top:100px; 4 font-size: 45px; 5 text-align: left; 6} 7span{ 8 color: transparent; 9 animation-name: blur; 10 animation-duration:7s; 11 animation-timing-function:ease-out; 12 animation-fill-mode:both; 13 14 15} 16 17@keyframes blur { 18 0% {text-shadow: 0 0 100px rgb(224, 81, 81); opacity:0;} 19 5% {text-shadow: 0 0 90px rgb(214, 70, 70);} 20 15% {opacity: 1;} 21 20% {text-shadow: 0 0 0px rgb(236, 95, 114);} 22 100% {text-shadow: 0 0 0px rgb(248, 69, 99);} 23 24}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/01 01:21