2 snippets in HTML & CSS
Also written as fade in
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.