テキストを一文字ずつフェードインさせる
Result
デモでは繰り返しアニメーションしｔれいますが、タイトル通りフェードインのみとするならkeyframesで80%以降がフェードアウト設定になっているので調整します。また、animation-fill-modeをforwardsにしてkeyframesの100%時の挙動で止められます。
css
span {
color: transparent;
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 {
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
