Text Reveal Slide Up

Text slides up from below its container, creating an elegant reveal effect. Perfect for headings and hero text on page load.

.text-reveal {
  overflow: hidden;
}
.text-reveal span {
  display: inline-block;
  transform: translateY(100%);
  animation: slideUp 0.6s ease forwards;
}
@keyframes slideUp {
  to { transform: translateY(0); }
}