基本上，animation-fill-mode: forwards将保留由最后一个关键帧设置的样式值。但是当你使用vue Transition组件时，类titleAnimation-enter-active是：
在整个进入阶段。在插入元素之前添加，在过渡/动画结束时删除
见文档
当类被移除时，所有CSS属性（包括动画）都将从元素中移除。所以你的风格不会被应用。

解决方案

• 将所有需要的样式添加到元素类（.title），不过渡活动类
• 向过渡类添加动画样式

方案一：使用CSS过渡

const {
  createApp,
  ref
} = Vue

createApp({
  setup() {
    const showHero = ref(false)
    return {
      showHero
    }
  }
}).mount('#app')

.hero {
  padding: 3em 5em;
  border: solid 1px black;
  text-align: center;
  transition: 3s transform;
  will-change: transform;
}

h1 {
  color: green;
  font-size: 5em;
}

/* for entering animation */

.hero-enter-from {
  transform: scale(0);
}

/* for leaving animation */

.hero-leave-to {
  transform: scale(0);
}

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <button @click="showHero = !showHero">Toggle</button>
  <Transition name="hero">
    <div class="hero" v-if="showHero">
      <h1>I'm growing</h1>
    </div>
  </Transition>
</div>

方案二：使用CSS动画

const {
  createApp,
  ref
} = Vue

createApp({
  setup() {
    const showHero = ref(false)
    return {
      showHero
    }
  }
}).mount('#app')

.hero {
  padding: 3em 5em;
  border: solid 1px black;
  text-align: center;
  will-change: transform;
}

h1 {
  color: green;
  font-size: 5em;
}

/* for entering animation */

.hero-enter-active {
  animation: upScale 3s;
}

/* for leaving animation */

.hero-leave-active {
  animation: downScale 3s;
}

@keyframes upScale {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes downScale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
  <button @click="showHero = !showHero">Toggle</button>
  <Transition name="hero">
    <div class="hero" v-if="showHero">
      <h1>I'm growing</h1>
    </div>
  </Transition>
</div>