🎬 Lesson 8: Transitions & Animations

⏱️ Estimated time: 35 minutes | Difficulty: Intermediate

Transitions

Transitions create smooth changes between property states (like hover effects).

.button {
    background: #ff2d95;
    transform: scale(1);
    transition: all 0.3s ease;
}

.button:hover {
    background: #ff69b4;
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 45, 149, 0.4);
}

/* Specific properties */
transition: background 0.3s ease, transform 0.2s ease-out;

Transforms

transform: translateX(50px);     /* Move right */
transform: translateY(-20px);    /* Move up */
transform: rotate(45deg);        /* Rotate */
transform: scale(1.5);           /* Scale up */
transform: skewX(10deg);         /* Skew */

/* Combine transforms */
transform: translateY(-5px) rotate(5deg) scale(1.1);

Keyframe Animations

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

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

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.card { animation: fadeIn 0.6s ease forwards; }
.heart { animation: pulse 2s ease infinite; }
.loader { animation: spin 1s linear infinite; }

Animation Properties

animation-name: fadeIn;
animation-duration: 0.5s;
animation-timing-function: ease;  /* ease, linear, ease-in-out */
animation-delay: 0.2s;
animation-iteration-count: infinite;  /* or a number */
animation-direction: alternate;       /* forward, backward */
animation-fill-mode: forwards;        /* Keep final state */

/* Shorthand */
animation: fadeIn 0.5s ease 0.2s infinite alternate forwards;