Text Reveal Animation CSS (Code Snippet)

<div class="reveal-container">
  <h1 class="reveal-text">
    <span>DESIGN</span>
  </h1>
  <h1 class="reveal-text">
    <span>DEVELOP</span>
  </h1>
  <h1 class="reveal-text">
    <span>DEPLOY</span>
  </h1>
</div>

.reveal-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #111827;
  padding: 50px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reveal-text {
  font-size: 4rem;
  color: white;
  margin: 0;
  line-height: 1.1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  overflow: hidden;
}
.reveal-text span {
  display: block;
  transform: translateY(100%);
  animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
/* Staggered Delays */
.reveal-text:nth-child(1) span { animation-delay: 0.2s; }
.reveal-text:nth-child(2) span { animation-delay: 0.4s; }
.reveal-text:nth-child(3) span { animation-delay: 0.6s; }

@keyframes reveal {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

Text Reveal Animation CSS

Share Code Snippet