Blur In Text
ぼかしから鮮明になるテキスト出現。ヘッダーに。
HTML
<h2 class="blur-in">Focus on what matters.</h2>
CSS
.blur-in {
font-size: 26px;
font-weight: 700;
letter-spacing: -.02em;
color: #1a1a1a;
animation: blur-reveal 1.2s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes blur-reveal {
0% { opacity: 0; filter: blur(12px); transform: translateY(8px); }
100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}