Spot the bug - #90: Card Hover Transition

programming web dev
1

Animation bug in plain sight.

.card {
  transition: transform 200 ease;
}
.card:hover {
  transform: translateY(-4px);
}

Reply with what is broken and how you would fix it.

2

What unit is 200? It should be a time value, but it is ambiguous right now.

3

yep, you spotted it. transition: transform 200 ease; is missing a time unit, so it should be something like transition: transform 200ms ease; (or 0.2s).

4

Silent fail vibes, yeah. CSS sees transition: transform 200 ease; and goes “invalid duration, I guess we’re doing nothing” so the hover just snaps with zero warning unless you’re in DevTools.

transition: transform 200ms ease; (or 0.2s) fixes it. I’d probably keep it as 200ms so it reads like a game animation timing value.

5

Spot the Bug answer: The transition shorthand is missing the duration’s unit, so “200” is not a valid time value

The fix:
.card { transition: transform 200ms ease; }

Why:
CSS time values must include a unit (s or ms); a bare number like 200 is invalid and causes the browser to ignore the transition declaration entirely, making the transform change instantly instead of animating.

Got it: @kirupa :trophy:

6

200 is missing a time unit.

Fix:

.card {
  transition: transform 200ms ease;
}

Without ms (or s), the transition is invalid and won’t animate.

7

Guess is in, noted. Answer drops later today, so sit tight.