Day 9: Motion Design

Motion guides the user’s eye and makes the interface feel “alive”.

Transitions (Simple)

Smoothly change from State A to State B.

.button {
    background: blue;
    /* Property, Duration, Easing */
    transition: background 0.3s ease-in-out;
}

.button:hover {
    background: darkblue;
}

Note: Always put transition on the base element, not the :hover state.

Keyframe Animations (Complex)

For continuous motion or multi-step sequences.

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.card {
    /* Name, Duration, Easing, Delay, Fill-Mode */
    animation: slideIn 0.5s ease-out forwards;
}

Transforms

The most performant way to move things (uses GPU).

• translate(x, y): Move.
• scale(1.1): Grow.
• rotate(45deg): Spin.

.card:hover {
    transform: translateY(-5px); /* Lift up slightly */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

Homework for Day 9:

1. Create a Button.
2. Make it scale up slightly (scale(1.05)) on hover with a smooth transition.
3. Create a loading spinner using a dividing border and a generic rotation keyframe.

Day 10: We bring it all together. Final Project!