Scale In Heading
スケール+フェードで登場するヘッディング。
HTML
<h1 class="scale-heading">Welcome</h1>
CSS
.scale-heading {
font-size: 28px;
font-weight: 800;
letter-spacing: -.03em;
color: #1a1a1a;
animation: scale-in .8s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes scale-in {
0% { opacity: 0; transform: scale(.8); filter: blur(8px); }
100% { opacity: 1; transform: scale(1); filter: blur(0); }
}