Day 2 - Animations

Bring your web pages to life with smooth transitions and complex keyframe animations.

---

1. Transitions

Smoothly change property values (like color or size) over a given duration when an event occurs (like hover).

Code:

/* CSS */
.trans-box {
    background-color: green;
    transition:  background-color 0.5s ease;
}

.trans-box:hover {
    background-color: orange;
}

Output (Hover over them):

---

2. Transforms

Modify the shape and position of elements: rotate, scale, translate, skew.

Code:

/* CSS */
.rotate-box:hover {
    transform:  rotate(180deg);
}
.scale-box:hover {
    transform:  scale(0.5);
} /* Shrink to 50% */

Output (Hover over them):

---

3. Animation Basics: Point A to Point B

The most common animation is moving an element from a starting position (Point A) to an ending position (Point B).

Code:

/* CSS */
.anim-move {
    animation:  moveRight 2s infinite alternate;
}

@keyframes moveRight {
    from {
        transform:  translateX(0);
    }

    to {
        transform: translateX(200px);
    }
}

Output:

---

4. Keyframe Animations

Create complex animations by defining steps (keyframes).

Shorthand Syntax Order:
animation: name duration timing-function delay iteration-count direction fill-mode;

Code:

/* CSS */
@keyframes spin {
    0% {  transform:  rotate(0deg); }
    100% {  transform:  rotate(360deg); }
}

.anim-spin {
    /* name | duration | timing-function | delay | iteration-count |  direction | fill-mode */
    animation:  spin 2s linear 0s infinite normal none;
}

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

.anim-bounce {
    animation:  bounce 1s ease 0s infinite normal none;
}

Output:

---

5. Practical: Loading Spinner

A classic use case for infinite rotation animations.

Output:

---

6. Practical: 3D Card Flip

Using perspective, backface-visibility, and transform: rotateY.

Output (Hover to flip):