vue transition with animate.css not working as expected with fadeInUp

Question

For some reason animate.css is not working exactly how I expected it to. I have this component:

<transition
  appear
  enter-active-class="animated fadeInUp"
  leave-active-class="animated fadeOutDown"
  mode="out-in"
>
  <span
    :key="rotateindex"
    :style="{ color: rotatingText[rotateindex].colour }"
  >
    {{ rotatingText[rotateindex].title }}
  </span>
</transition>

The list of text that is rotation is just this:

[
  {
      "title":"Test 1",
      "colour":"#00FFFF"
  },
  {
      "title":"Test 2",
      "colour":"#0000FF"
  },
  {
      "title":"Test 3",
      "colour":"#FF00FF"
  }
]

In my code, I do this:

const textRotate = () => {
  rotateindex.value = rotateindex.value + 1;

  const index = rotateindex.value;
  const text = rotatingText.value;

  console.log("text to rotate", text, text.length);

  if (index >= text.length) {
    rotateindex.value = 0;
  }

  // Show current Index - For Debug
  console.log(rotateindex.value);
  console.log(text[rotateindex.value]);
  console.log(text[rotateindex.value].title);
};

const startAnimation = () => {
  setInterval(() => {
    textRotate();
  }, 2000);
};

watch(
  rotatingText,
  (text) => {
    if (!text) return;
    console.log("text", text);
    startAnimation(); // Start the animation
  },
  {
    immediate: true,
  }
);

And my text starts animating, the only issue is that it doesn't fadeInUp or fadeOutDown, instead it just fades in and out (opacity only).

Does anyone know how I can get it to move vertically too?