Smooth Entry with @starting-style (Code Snippet)

<button onclick="toggleBox()" class="btn">Toggle Box</button>
<div id="box" class="animated-box" hidden>
  I can animate from display: none!
</div>

* { 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);
  }
}

function toggleBox() {
  const box = document.getElementById("box");
  box.hidden = !box.hidden;
}

Smooth Entry with @starting-style

Share Code Snippet