Fade Stagger Lines
複数行が時間差でフェードインするテキスト。
HTML
<div class="fsl"> <div class="fsl-line" style="--i:0">Design with intention.</div> <div class="fsl-line" style="--i:1">Build with precision.</div> <div class="fsl-line" style="--i:2">Ship with confidence.</div> </div>
CSS
.fsl {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
line-height: 1.8;
}
.fsl-line {
opacity: 0;
transform: translateY(12px);
animation: fsl-in .6s forwards;
animation-delay: calc(var(--i) * .15s + .3s);
}
@keyframes fsl-in {
to { opacity: 1; transform: translateY(0); }
}