CSS Transitions & Animations

/* Basic transition */
.button {
    background: blue;
    color: white;
    transition: background 0.3s ease;
}
.button:hover {
    background: darkblue;
}

/* Multiple properties */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Transition shorthand: property duration timing-function delay */
.element {
    transition: all 0.3s ease-in-out 0.1s;
    /* all = all animatable properties */
    /* ease-in-out = slow start and end */
}

/* Timing functions */
transition-timing-function: ease;        /* Default — slow in/out */
transition-timing-function: linear;      /* Constant speed */
transition-timing-function: ease-in;     /* Slow start */
transition-timing-function: ease-out;    /* Slow end */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bounce */

/* Define the animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply it */
.animated-element {
    animation: slideIn 0.5s ease forwards;
    /* forwards = stay at final state after animation */
}

/* Multiple keyframes */
@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse {
    animation: pulse 2s infinite ease-in-out;
}

/* Complex animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake { animation: shake 0.5s ease; }

.element {
    animation-name: slideIn;
    animation-duration: 0.5s;         /* How long */
    animation-timing-function: ease;   /* Speed curve */
    animation-delay: 0.2s;             /* When to start */
    animation-iteration-count: 1;      /* How many times (infinite) */
    animation-direction: normal;       /* normal, reverse, alternate */
    animation-fill-mode: forwards;     /* What happens after (forwards, backwards, both) */
    animation-play-state: running;     /* paused or running */
    
    /* Shorthand */
    animation: slideIn 0.5s ease 0.2s 1 forwards;
}

/* Staggered animations */
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }

/* Fade in */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Scale up */
@keyframes scaleUp {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Slide from right */
@keyframes slideFromRight {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Spin */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.spinner { animation: spin 1s linear infinite; }

/* Bounce */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.bounce { animation: bounce 1s ease infinite; }

/* ✅ GOOD — GPU-accelerated properties */
transform: translateX(100px);
opacity: 0.5;
filter: blur(5px);

/* ❌ AVOID — triggers layout recalculations */
width: 200px;
margin-left: 50px;
padding: 20px;
font-size: 24px;

/* will-change — hint browser to prepare */
.animated {
    will-change: transform, opacity;
}

/* prefers-reduced-motion — respect user preferences */
@media (prefers-reduced-motion: reduce) {
    .animated {
        animation: none;
        transition: none;
    }
}