Transition Timing — Code Challenge

How it works

• Timing functions change how progress is distributed across the duration. The final distance remains the same while acceleration feels different.
• A decorative effect should leave the content understandable when the effect is unavailable. Provide a readable background and normal document flow first.
• Inspect clipping, stacking, and contrast when adding layers; appearance changes do not always change the layout box.

Your task

Use the HTML below to explore this rule: Timing functions change how progress is distributed across the duration. The final distance remains the same while acceleration feels different. Write your own CSS before opening the solution. Then replace the heading with a longer one and verify that the content is still readable.

.card { transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
.card:hover { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

A solution to compare

The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.

<article class="card"><span class="badge">This Saturday</span><h2>Neighbourhood repair club</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article>

body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }

/* This lesson */
.card { transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
.card:hover { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

Timing functions change how progress is distributed across the duration. The final distance remains the same while acceleration feels different.