How do I make NuxtLink ignore css animation? - vue.js

Question

I have page with background-color animated. I'm trying to navigate to another page using NuxtLink, but it doesn't render another page until css animation on the current page finishes. Is there a way for a NuxtLink to ignore animations?
Page with animation
<template>
<div class="animated">
<h1>MAIN</h1>
</div>
</template>
<script>
export default {
name: "IndexPage",
};
</script>
<style scoped>
.animated {
background-color: rgba(0, 0, 0, 1);
animation-duration: 5s;
animation-fill-mode: forwards;
animation-name: anim;
}
#keyframes anim {
from {
background-color: black;
}
to {
background-color: red;
}
}
</style>
Layout with NuxtLinks
<template>
<div>
<nav>
<NuxtLink to="/">Main</NuxtLink>
<NuxtLink to="/foo">Foo</NuxtLink>
<NuxtLink to="/bar">Bar</NuxtLink>
</nav>
<Nuxt />
</div>
</template>
Another page without animation
<template>
<h1>FOO</h1>
</template>
When I try to navigate from Main to Foo page, it transitions only after animation in main finishes. I would like it to transition to another page regardless of css.
Example: https://codesandbox.io/s/heuristic-kate-k4t77r

Answer 1

I got it working by wrapping the animated page inside a div. It might be colliding with nuxt transitions, I'm not sure but now it works.
<template>
<div>
<div class="animated">
<h1>MAIN</h1>
</div>
</div>
</template>