CSS Animations and Transitions

CSS Transitions

Transitions animate a property change from one value to another over a duration.

.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.button:hover {
    background-color: darkblue;
    transform: scale(1.05);
}

Transition Properties

Timing Functions

CSS Animations

Animations use @keyframes to define multiple steps.

/* Define the animation */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-30px); }
}

/* Apply the animation */
.hero {
    animation: slideIn 0.8s ease-out forwards;
}

.ball {
    animation: bounce 1s ease-in-out infinite;
}

Animation Properties

Transform Property

.element {
    transform: translateX(50px) translateY(20px);
    transform: rotate(45deg);
    transform: scale(1.5);
    transform: skew(10deg, 5deg);
    transform: matrix(1, 0, 0, 1, 50, 20);
}

CSS Variables with Animations

:root {
    --primary: #3498db;
    --duration: 0.4s;
}

.card {
    transition: box-shadow var(--duration) ease;
}

.card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

Key Takeaway: CSS transitions handle simple state changes (hover effects), while CSS animations with @keyframes handle complex multi-step sequences. Both use the transform property for GPU-accelerated smooth effects.