Create a button with a smooth color change:

1. Base background color is blue.
2. On hover, change the color to red.
3. The transition should take 0.5s.
4. Use the timing function ease-in-out.

.btn {
    background-color: blue;
    transition: background-color 0.5s ease-in-out;
}

.btn:hover {
    background-color: red;
}

Apply the following transforms to an image on hover:

1. Scale the image to 1.2.
2. Rotate it by 10 degrees.
3. Translate it 20px to the right.

img:hover {
    transform: scale(1.2) rotate(10deg) translateX(20px);
}

Create a simple animation:

1. Define `@keyframes` named "fadeIn".
2. Start at opacity 0 and end at opacity 1.
3. Apply the animation to (.box) for 2 seconds and run once.

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.box {
    animation: fadeIn 2s ease-in;
}

Create a flip-card effect:

1. Add `perspective` to the parent container (e.g., 1000px).
2. Rotate (.card) on the Y axis by 180 degrees on hover.
3. Use `preserve-3d` to keep 3D depth for children.

.container {
    perspective: 1000px;
}

.card {
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.container:hover .card {
    transform: rotateY(180deg);
}

Use variables to make changes easier:

1. Define a main color variable (`--main-color`) with the value "blue" in `:root`.
2. Use it for the button background and the heading text color.

:root {
    --main-color: blue;
}

button {
    background-color: var(--main-color);
}

h1 {
    color: var(--main-color);
}

Make an element spin forever:

1. Define `@keyframes` for rotation from 0 to 360 degrees.
2. Apply a linear infinite animation for 2 seconds.

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

.loader {
    animation: spin 2s linear infinite;
}

Create a staggered effect:

1. On hover, change width first.
2. After width finishes (e.g., 0.5s), change height.
3. Use `transition-delay` to achieve this.

.box {
    transition: width 0.5s, height 0.5s 0.5s; /* delay height by 0.5s */
}

.box:hover {
    width: 200px;
    height: 200px;
}

Apply visual effects to an image:

1. Make the image grayscale at 100%.
2. Add a 5px blur.
3. On hover, remove these effects (back to normal).

img {
    filter: grayscale(100%) blur(5px);
    transition: filter 0.3s;
}

img:hover {
    filter: none; /* or grayscale(0) blur(0) */
}

Change the element shape:

1. Use `clip-path` to make the image appear as a circle.
2. Or make it appear as a triangle with polygon.

/* Circle */
.circle {
    clip-path: circle(50%);
}

/* Triangle */
.triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Control animation direction:

1. Make the animation run forward then backward (alternate).
2. Keep the end state after the animation finishes (animation-fill-mode: forwards).

.box {
    animation-direction: alternate;
    animation-fill-mode: forwards;
}