テキストを一文字ずつフェードインさせる

Result

デモでは繰り返しアニメーションしｔれいますが、タイトル通りフェードインのみとするならkeyframesで80%以降がフェードアウト設定になっているので調整します。また、animation-fill-modeをforwardsにしてkeyframesの100%時の挙動で止められます。

css

span {/*各テキストにanimationを設定*/
	color: transparent;/*テキストを透明にしてtext-shadowだけ表示する*/
	animation: blur 10s ease-out infinite;
}

span:nth-child(1) {/*一文字ずつ遅延させる*/
	animation-delay: 0.1s;
}
span:nth-child(2) {
	animation-delay: 0.2s;
}
span:nth-child(3) {
	animation-delay: 0.3s;
}
span:nth-child(4) {
	animation-delay: 0.4s;
}
span:nth-child(5) {
	animation-delay: 0.5s;
}
span:nth-child(6) {
	animation-delay: 0.6s;
}
span:nth-child(7) {
	animation-delay: 0.7s;
}

@keyframes blur {/*opacityとtext-shadow+animationでフェードインを表現する*/
	0%		{text-shadow:  0 0 100px #fff; opacity:0;}
	5%		{text-shadow:  0 0 90px #fff;}
	15%		{opacity: 1;}
	20%		{text-shadow:  0 0 0px #fff;}
	80%		{text-shadow:  0 0 0px #fff;}
	85%		{opacity: 1;}
	95%		{text-shadow:  0 0 90px #fff;}
	100%	{text-shadow:  0 0 100px #fff; opacity:0;}
}

html

<p>
  <span>か</span> 
  <span>ち</span> 
  <span>び</span> 
  <span>と</span> 
  <span>.n</span> 
  <span>e</span> 
  <span>t</span>
 </p>

via

Text blurring animation