CSS Animation Snippets - Common Animations

Common CSS animation patterns for smooth UI interactions.

Fade In

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

Slide In

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

Hover Scale

.hover-scale {
    transition: transform 0.2s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

Pulse Animation

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s infinite;
}

Smooth Transition

.smooth {
    transition: all 0.3s ease;
}

Features

• Smooth animations
• Performance optimized
• Easy to customize
• Cross-browser compatible