CircleMarker SVG classes/animations not updating reliably when reactive state changes

I’m using Vue-Leaflet + Leaflet to display dynamic CircleMarkers whose styling depends on reactive Vue state.

When a marker enters the list, it should fade in via CSS.

When it leaves the list, it should get a fade-out class, animate, and only be removed afterwards.

This works except for one thing:

the fade-out animation never plays — the marker disappears instantly, even though the correct CSS class is applied.

Here’s how the markers are rendered:

<LCircleMarker
  v-for="item in displayItems"
  :key="item.url"
  :lat-lng="[item.lat, item.long]"
  :radius="6"
  :class-name="[
    'map__circle-marker',
    item._fadeOut ? 'map__circle-marker--fadeout' : 'map__circle-marker--fadein'
  ].join(' ')"
  :color="'#FE581B'"
  :fill-color="'#000'"
  :fill-opacity="1"
  :layerType="'overlay'"
  :pane="'markerPane'"
>
  <LPopup>...</LPopup>
</LCircleMarker>

EDIT: Here is the CSS

.map__circle-marker {
  animation-name: map-marker-in;
  animation-duration: 15s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
  pointer-events: all !important;
}

@keyframes map-marker-in {
  0% {
    stroke-width: 50;
  }

  20% {
    stroke-width: 3;
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.map__circle-marker--fadeout {
  animation: fadeout-marker 30s forwards;
  opacity: 1;
}

@keyframes fadeout-marker {
  0% {
    opacity: 1;
  }

  20% {
    opacity: 0.6;
  }

  90% {
    opacity: 0.2;
    stroke-width: 3;
  }
  
  100% {
    opacity: 0;
    stroke-width: 0;
  }
}