animation-iteration-count only applies a blink (sometimes) in the animation, this happened in my project and in an example of the official documentation of vue3 when applying this property.

I did these tests to exemplify

[HTML+CSS](https://codepen.io/albertochigua/pen/dyzOzee?editors=1100)

```css
.a {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: example 1s 3;
}

@keyframes example {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
```

```html
<h1>CSS Animation</h1>

<p>The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation n times before it stops:</p>

<div class="a"></div>
```

[VUEJS3](https://codepen.io/albertochigua/pen/oNeYGNa)

```js
const app = Vue.createApp({
  el: '#app',
  data: function () {
    return {
        show: true
    }
  },

})

app.mount('#app')
```

```css
.a {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}

@keyframes example {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.example-enter-active {
  animation: example 0.5s;
  animation-iteration-count: 3;

}
.example-leave-active {
  animation: example .5s reverse;

}
```

```html
<script src="https://unpkg.com/vue@3.0.0-rc.5/dist/vue.global.prod.js"></script>

  <div id="app">

<h1>CSS Animation</h1>

<p>The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation n times before it stops:</p>
<button v-on:click="show=!show">{{show}}</button>
<transition appear name="example">
  <div  v-if="show" class="a"></div>
                                </transition> 

  </div>
```

I don't know if I missed any details in the vuejs3 documentation
Do you have any special way of dealing with this property?
Any idea what happens?