* { box-sizing: border-box; }
body {
font-family: system-ui, "Segoe UI", sans-serif;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
background: #f1f5f9;
}
.btn {
padding: 10px 20px;
background: #0f172a;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
.animated-box {
width: 200px;
height: 100px;
background: white;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
color: #334155;
text-align: center;
padding: 20px;
/* Transition Logic */
transition: opacity 0.5s, transform 0.5s, display 0.5s allow-discrete;
opacity: 1;
transform: translateY(0);
}
/* Hidden State */
.animated-box[hidden] {
opacity: 0;
transform: translateY(20px);
display: none;
}
/* The Magic: Initial state when becoming visible */
@starting-style {
.animated-box {
opacity: 0;
transform: translateY(20px);
}
}
