CSS Transitions, Transforms, and Animations

# CSS Transitions & Animations

1. Introduction #

2. Learning Objectives #

• Smoothly transition states using transition.

• Move, scale, and rotate elements using transform.

• Create infinite loading spinners using @keyframes and animation.

3. Detailed Explanations #

CSS Transitions #

.btn {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    /* property duration timing-function */
    transition: background-color 0.3s ease-in-out;
}

.btn:hover {
    background-color: darkblue; /* Smoothly changes over 0.3s! */
}

CSS Transforms #

• Translate: Move an element X or Y pixels.

• Scale: Make it bigger or smaller.

• Rotate: Spin it.

.card {
    transition: transform 0.2s ease;
}

.card:hover {
    /* Moves UP 5px and grows by 5% */
    transform: translateY(-5px) scale(1.05);
}

CSS Keyframe Animations #

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

/* Apply the animation to an element */
.loader {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    
    /* name duration timing-function iteration-count */
    animation: spin 1s linear infinite;
}

4. Mini Project: Interactive Product Card #

<div class="product">
    <img src="shoes.jpg" alt="Shoes">
    <h3>Running Shoes</h3>
    <button>Buy Now</button>
</div>

.product {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.product:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px rgba(0,0,0,0.15);
}

.product button {
    background: #10b981;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    transition: background 0.2s;
    cursor: pointer;
}

.product button:hover {
    background: #059669;
}

5. MCQs #

6. Summary #