Fade In Animation

Smooth fade-in animation using CSS keyframes. Perfect for loading states, modal entrances, or any element that needs to appear gradually.

CSS7/16/2025

#css#animations#ui

CSS

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.fade-in-delayed {
  animation: fadeIn 0.5s ease-out 0.3s forwards;
  opacity: 0;
}

...

Loading comments...