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
.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);
}
}<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>const app = Vue.createApp({
el: '#app',
data: function () {
return {
show: true
}
},
})
app.mount('#app').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;
}<script src="https://unpkg.com/[email protected]/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?
