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.
200 needs a unit of time.
Hmm, an interesting observation. We’ll see how that plays out when the full answer drops later today.
Yeah, that’s how you get burned.
Spot the Bug answer: The transition timing function ‘ease’ is missing a unit of time.
The fix:
Change ‘ease’ to ‘ease-in-out’ or another valid timing function keyword, or specify a cubic-bezier function.
Why:
In CSS transitions, the ‘transition-timing-function’ property expects a keyword like ‘ease-in’, ‘linear’, or a ‘cubic-bezier()’ function. ‘ease’ is a valid keyword, but it is being incorrectly used as a duration or is misplaced, leading to the transition not applying the intended timing function correctly. The browser will likely ignore the invalid part of the transition shorthand.
Nobody got this one. It was a sneaky one.
Close but not quite:
@kirupa - They correctly identified that ‘200’ needs a unit, but missed that ‘ease’ is also misplaced and should be a timing function keyword.
First-answer leaderboard
- @kirupa - 4 (firsts)
- @adnanahmed - 2 (firsts)
- @emmawalter5 - 1 (first)
