Fade In Up: CSS Text Animation

Fade In Up

The text rises a little as it fades in. The most useful entrance animation there is: quiet, quick, and appropriate for headings, captions and anything that appears on load.

Also known as: text fade in, fade up on load, entrance animation.

Welcome back

Color Font size 40px Dark background

HTML

<div class="txt-fade-up">Welcome back</div>

CSS

.txt-fade-up {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c);
  opacity: 0;
  animation: txt-fade-up-in 0.8s ease-out forwards;}
@keyframes txt-fade-up-in {
  from { opacity: 0; transform: translateY(0.6em); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .txt-fade-up, .txt-fade-up *, .txt-fade-up::before, .txt-fade-up::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --txt-color on the element or a parent. Currently previewing #3b82f6.
Font size: set --txt-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 40px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Fade In Up

HTML

CSS

Customizing this snippet

Similar text animations