CSS Transitions

All in one: every transition and transform, side by side

What this example compares

Instant or smooth: no transition vs transition: background-color 0.35s ease vs transition: none
The four parts: the shorthand vs the four longhands transition-property, -duration, -timing-function, -delay, a transition with no duration, and one with a delay
Which property: one name vs a comma list (transform, box-shadow) vs all
The speed curve: linear vs ease vs ease-in vs ease-out vs ease-in-out (and cubic-bezier())
How long: 50ms vs 200ms vs 0.2s vs 0.4s vs 1.2s
Which rule: transition on the normal rule vs on :hover only vs on both
Transform functions: none, translateY(-6px), translateX(10px), scale(1.1), rotate(8deg) and two at once
Move without disturbing: transform vs width and margin-top
What cannot be transitioned: display vs opacity + transform, the .is-open class, and font-family
Motion and the reader: @media (prefers-reduced-motion: reduce), 0.01ms !important vs transition: none
Project step 16: :hover vs :active vs :focus-visible vs ::after on the course card, the button and the arrow link

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see eleven panels (scroll inside the result to reach the last ones). At rest, panels 1 to 6 show rows of identical dark boxes, because a transition only shows while something changes: hover each one and compare how it gets to orange (or green, or red in panel 6) and how it comes back. Panel 4 shows six orange dots lined up at the left; hover the strip and they race to the right. Panel 7 shows six dark boxes over dashed outlines: the first sits exactly on its outline, the others are lifted, nudged right, grown, turned and lifted-and-grown. Panel 8 shows an orange B drawn bigger over A and C, a wider B pushing C to the right, a raised B with a gap under it, and a raised B with C following it. In panel 9 cards 1 to 3 show no message yet (hover cards 1 and 2 to bring theirs in; card 3 stays closed), card 4 shows "Unit 3 notes", and card 5 shows "Priya's notes" in a serif font that turns into a typewriter font the instant you hover it. Panel 10, card 1 reads "Reduce motion: OFF - motion plays" (ON if your device asks for less motion), and panel 11 shows the course card, three round navy buttons and a blue "Course page" link with an arrow. There is no JavaScript on this page, so the Console prints nothing.

Quick check: in panel 6 the "Wrong" box eases into red but snaps back to navy. What single move fixes it?

Move transition: background-color 0.4s ease; out of .p6-bad:hover into the normal rule .p6-bad { }. The transition is read from the rule that applies at the moment of the change; once the mouse leaves, the :hover rule no longer applies, so a transition written only there is gone too.