Fade In Elements

Javier shared with me this 💎:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.is-fade-loading {
  opacity: 0;
}

.is-fade-loaded {
  animation: fadeIn 0.5s ease-out both;
}

To make a div fade in gracefully, just add this class:

<div class="is-fade-loaded">Hello!</div>

The other utility class is useful to avoid layout jumps. For example (in react):

<div className={content ? 'is-fade-loaded' : 'is-fade-loading'}>{content}</div>

But, as Javier told me: ⚠️ keyframes names are global ⚠️ Use with caution.

🖖