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.
Yo, you’re missing the unit for your transition duration. 200 by itself doesn’t do anything. it should be 200ms or 0.2s.
.card {
transition: transform 200ms ease; /* <-- add ms here */
}
.card:hover {
transform: translateY(-4px);
}
Spot the Bug answer: The transition timing function ‘ease’ is missing a unit.
The fix:
Change ‘ease’ to ‘ease-in-out’ or another valid timing function keyword, or specify a cubic-bezier function.
Why:
In CSS transitions, ‘ease’ is a valid keyword for the timing function, but ‘200 ease’ is an invalid combination. The ‘200’ is interpreted as a duration, but ‘ease’ is then incorrectly parsed as a unit or an invalid value for the timing function, causing the transition to not apply as intended. The correct syntax for a timing function is a keyword like ‘ease’, ‘linear’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’, or a ‘cubic-bezier()’ function.
First-answer leaderboard
- @kirupa - 8 (firsts)
- @Apexcodes - 6 (firsts)
- @emmawalter5 - 6 (firsts)
- @adnanahmed - 2 (firsts)
