@keyframesアニメーションテキストがフェードアウトして輝きます

Question

私はこのテキストアニメーション効果（please see video）をコーディングしようとしていますが、私は解決策からかなり離れています！

私を助けてもらえますか？おそらくjsを使用する方が良いでしょうか？

h1.fadeinone { animation: fadeinone 10s;} 
 
h1.fadeintwo { animation: fadeintwo 10s;} 
 
h1.fadeinthree { animation: fadeinthree 10s;} 
 

 
@keyframes fadeinone { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    33% { /* 3s for fade in */ 
 
    opacity: 1; 
 
    } 
 

 
} 
 

 
@keyframes fadeintwo { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 

 
    66% { /* 3s for fade in */ 
 
    opacity: 1; 
 
    } 
 
} 
 

 
@keyframes fadeinthree{ 
 
    0% { 
 
    opacity: 0; 
 
    } 
 

 
    100% { /* 3s for fade in */ 
 
    opacity: 1; 
 
    } 
 
} 
 

 
#claim h1 { 
 

 
font-size: 40px; 
 
line-height:40px; 
 
margin:0px; 
 
padding:0px; 
 
color:#FFF; 
 
} 
 

 
#claim {background-color:red;}

<div id="claim"> 
 
<h1 class="fadeinone">DESIGN</h1> 
 
<h1 class="fadeintwo">loren ipsum</h1> 
 
<h1 class="fadeinthree">DOLOR SIT</h1> 
 
</div>

Answer 1

私はあなたがanimation-delayプロパティを探していると思います。ちょっと面倒ですが、各行の各文字を独自の要素（この場合はspanを使用しました）に分けなければならないため、それぞれspanに手動で割り当てる必要がありますが、効果は一致しますあなたが提供したもの

また、複数のアニメーションに対してパーセンテージを使用するのではなく、アニメーションの開始を決定するために遅延を使用するため、この方法を使用すると、1セットのキーフレームしか必要ありません。もちろん

div span 
 
{ 
 
    opacity: 0; 
 
    animation-name: fadein; 
 
    animation-duration: 3s; 
 
    animation-fill-mode:forwards; 
 
} 
 

 
div span:nth-child(1){animation-delay:0s} 
 
div span:nth-child(2){animation-delay:0.2s} 
 
div span:nth-child(3){animation-delay:0.4s} 
 
div span:nth-child(4){animation-delay:0.6s} 
 
div span:nth-child(5){animation-delay:0.8s} 
 
div span:nth-child(6){animation-delay:1s} 
 

 
@keyframes fadein 
 
{ 
 
    0%{opacity: 0} 
 
    100%{opacity:1} 
 
}

<div> 
 
    <span>D</span><span>E</span><span>S</span><span>I</span><span>G</span><span>N</span> 
 
</div>

は、Javascriptでこれを行うことができ、その溶液は、おそらくよりエレガントで変更が容易になります。ただし、互換性の問題に対処する必要があります。可能であれば、厳格なCSSをつけておくほうが良いでしょう。