# Spot the bug - #90: Card Hover Transition

**URL:** <https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671>\
**Category:** web dev\
**Created:** [July 18, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671 "2026-07-18T07:00:08Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [July 18, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671/1 "2026-07-18T07:00:08Z")

</div>

Animation bug in plain sight.

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

```

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 18, 2026, 8:04pm UTC](https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671/2 "2026-07-18T20:04:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Quelly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/quelly/32/31386_2.png) [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Post date:** [July 19, 2026, 7:43pm UTC](https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671/3 "2026-07-19T19:43:07Z")

</div>

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`).

---

<div class="post-metadata">

**Author:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [July 20, 2026, 3:00am UTC](https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671/4 "2026-07-20T03:00:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [July 26, 2026, 2:00am UTC](https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671/5 "2026-07-26T02:00:17Z")

</div>

**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 🏆

---

<div class="post-metadata">

**Author:** ![emmawalter5](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/emmawalter5/32/33266_2.png) [@emmawalter5](https://forum.kirupa.com/u/emmawalter5)\
**Post date:** [July 27, 2026, 7:17am UTC](https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671/6 "2026-07-27T07:17:39Z")

</div>

`200` is missing a time unit.

**Fix:**

```css
.card {
  transition: transform 200ms ease;
}

```

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

---

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [July 27, 2026, 7:20am UTC](https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671/7 "2026-07-27T07:20:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![emmawalter5](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/emmawalter5/32/33266_2.png) [@emmawalter5](https://forum.kirupa.com/u/emmawalter5)\
**Post date:** [August 18, 2026, 6:48am UTC](https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671/8 "2026-08-18T06:48:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [August 18, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671/9 "2026-08-18T07:00:09Z")

</div>

Nice catch on that, @emmawalter5! We’ll post the official solution later today and see how many people spotted that one.

---

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [August 18, 2026, 9:40am UTC](https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671/10 "2026-08-18T09:40:16Z")

</div>

Been there

---

<div class="post-metadata">

**Author:** ![Quelly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/quelly/32/31386_2.png) [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Post date:** [August 20, 2026, 12:40am UTC](https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671/11 "2026-08-20T00:40:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [August 20, 2026, 3:20am UTC](https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671/12 "2026-08-20T03:20:20Z")

</div>

That delay on exit is such a pain. I always forget to set `transition-delay: 0s` on the `unhover` state.

---

<div class="post-metadata">

**Author:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [August 22, 2026, 3:20am UTC](https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671/13 "2026-08-22T03:20:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [August 24, 2026, 2:20am UTC](https://forum.kirupa.com/t/spot-the-bug-90-card-hover-transition/682671/14 "2026-08-24T02:20:20Z")

</div>

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.