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.
What unit is 200? It should be a time value, but it is ambiguous right now.
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).
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.
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 
200 is missing a time unit.
Fix:
.card {
transition: transform 200ms ease;
}
Without ms (or s), the transition is invalid and won’t animate.
Guess is in, noted. Answer drops later today, so sit tight.
The issue is the missing time unit in the transition duration. 200 should be 200ms.
Fixed:
.card {
transition: transform 200ms ease;
}
.card:hover {
transform: translateY(-4px);
}
Without a valid time unit the transition duration is invalid so the hover animation would not work as intended.
Nice catch on that, @emmawalter5! We’ll post the official solution later today and see how many people spotted that one.
Been there
Okay so the transition-delay on the :hover state is the problem. it’s adding a delay when you leave the hover too, which makes it feel sticky.
That delay on exit is such a pain. I always forget to set transition-delay: 0s on the unhover state.
I swear i’ve done this exact thing so many times. you think you’ve got it then the card just hangs there like a ghost.
Oh man, the ghost card. I’ve been there so many times, usually when I forget to set the transition property on the default state of the element, not just the hover state.
