Fade

opacity: 0 to 1;

.disabled-card {
  opacity: 0.5;
  pointer-events: none;
}

.watermark {
  opacity: 0.15;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fade-in.visible {
  opacity: 1;
}

Note opacity affects the entire element and all its children. For transparent backgrounds only, use rgba or hsla with alpha instead. An element with opacity less than 1 creates a new stacking context.

@keyframes name {
  from { ... }
  to { ... }
}

@keyframes name {
  0% { ... }
  50% { ... }
  100% { ... }
}

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

.card {
  animation: fadeSlideIn 0.4s ease-out;
}

Note Keyframe animations run independently from state changes unlike transitions which need a trigger. Define keyframes globally and apply them with the animation property. The animation runs once by default.