enter and leave classes of vue transition doesn't work

I created this codepen, which is a simple flip card and it works fine in codepen, but when I add this project in my vue project created with cli, everything works fine; upon clicking a card, it shows back of the card, but it doesn't apply that transition so user can visually see that it is rotating. It rotates very fast, sounds like transition is not effecting.

This is the template code

  <div v-for="card in cards" @click="toggleCard(card)" :key="card.id">
    <transition name="flip">
      <div
           v-bind:key="card.flipped"
           v-html="card.flipped ? card.back : card.front"
           ></div>
    </transition>
  </div>

and the script code

export default {
  name: "FlipCard",
  data() {
    return {
      cards: [
        // cards here
      ],
    };
  },
  methods: {
    toggleCard: function (card) {
      const isFlipped = card.flipped;

      this.cards.forEach((strategy) => {
        strategy.flipped = false;
      });

      isFlipped === true ? (card.flipped = false) : (card.flipped = true);
    },
  },
};

and css code:

.flip-enter-active {
  transition: all 2s ease;
}

.flip-leave-active {
  display: none;
}

.flip-enter,
.flip-leave {
  transform: rotateY(180deg) !important;
  opacity: 0;
}

can anyone help why in vue cli project the transition is so fast or maybe not applying? Thank you in advance

The codepen you provided uses Vue 2. Your question is tagged Vue 3, so I assume you are using Vue 3.

Vue 3 made changes to transition class names - https://v3-migration.vuejs.org/breaking-changes/transition.html#_2-x-syntax.

-enter and -leave are now -enter-from and -leave-from.