文字を入れ替えた時にもcssのアニメーションをつけたい。

前提・実現したいこと

文字を入れ替えた時にも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件

ベストアンサー

記述が多くなり、スマートではないかもしれませんが

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.change {
15    color: transparent;
16    animation-name: blurr;
17    animation-duration: 7s;
18    animation-timing-function: ease-out;
19    animation-fill-mode: both;
20}
21
22@keyframes blur {
23    0% {
24        text-shadow: 0 0 100px rgb(224, 81, 81);
25        opacity: 0;
26    }
27    5% {
28        text-shadow: 0 0 90px rgb(214, 70, 70);
29    }
30    15% {
31        opacity: 1;
32    }
33    20% {
34        text-shadow: 0 0 0px rgb(236, 95, 114);
35    }
36    100% {
37        text-shadow: 0 0 0px rgb(248, 69, 99);
38    }
39}
40
41@keyframes blurr {
42    0% {
43        text-shadow: 0 0 100px rgb(224, 81, 81);
44        opacity: 0;
45    }
46    5% {
47        text-shadow: 0 0 90px rgb(214, 70, 70);
48    }
49    15% {
50        opacity: 1;
51    }
52    20% {
53        text-shadow: 0 0 0px rgb(236, 95, 114);
54    }
55    100% {
56        text-shadow: 0 0 0px rgb(248, 69, 99);
57    }
58}

Javascript
1function tuginomoji() {
2    a.className = "change";
3    b.className = "change";
4    c.className = "change";
5    d.className = "change";
6    a.innerHTML = "なにぬねの";
7    b.innerHTML = "はひふへほ";
8    c.innerHTML = "まみむめも";
9    d.innerHTML = "やゆよ";
10}
11setTimeout(tuginomoji, 3000);
12

投稿2021/07/31 17:00

fake_shibe

総合スコア806

sabure

2021/08/01 01:21

ありがとうございました。 classnameは初めて知りましたがすごく便利ですね。大変勉強になりました。

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

文字の変更タイミングに合わすようにcssに3行追加しました。

css
1@keyframes blur {
2	0%    {text-shadow:  0 0 100px rgb(224, 81, 81); opacity:0;}
3	5%    {text-shadow:  0 0 90px rgb(214, 70, 70);}
4	15%   {opacity: 1;}
5	20%   {text-shadow:  0 0 0px rgb(236, 95, 114);}
6	40%   {text-shadow:  0 0 0px rgb(236, 95, 114);}/*追加 にじみ開始*/
7	50%   {text-shadow: 0 0 70px rgb(224, 81, 81); }/*追加 にじみ最大*/
8	60%   {text-shadow:  0 0 0px rgb(236, 95, 114);}/*追加 にじみ終了*/
9	100%   {text-shadow:  0 0 0px rgb(248, 69, 99);}
10}