<div class="spacer">
<p>Scroll down to see the magic ↓</p>
</div>
<div class="reveal-card">
<h2>Hello There</h2>
<p>I fade in as I enter the viewport.</p>
</div>
<div class="reveal-card">
<h2>Smooth Entry</h2>
<p>No JavaScript required.</p>
</div>
<div class="reveal-card">
<h2>Native Performance</h2>
<p>Running on the compositor thread.</p>
</div>
<div class="spacer"></div>
* {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #f8fafc;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 50vh; /* Spacing to force scrolling */
}
.spacer {
height: 50vh;
display: flex;
align-items: center;
color: #64748b;
}
.reveal-card {
background: white;
padding: 40px;
border-radius: 16px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
text-align: center;
/* The Animation Magic */
opacity: 0;
scale: 0.8;
animation: fade-in linear forwards;
animation-timeline: view();
animation-range: entry 10% cover 30%;
}
@keyframes fade-in {
to {
opacity: 1;
scale: 1;
}
}
h2 { margin-top: 0; color: #1e293b; }
p { color: #64748b; }