Why are @keyframes animations not working with Vue.js?

Question

I'm trying to make a link flash when the user loads the site. However, the animation doesn't work in Vue.

I tried the same code without Vue in a seperate file and it worked just fine.

This is the element which should flash. (The class 'flash' shows up in the DOM. It seems like it's not a problem with my JS)

<a href="/test/" :class="isFlashing ? 'flash' : ''">
  <h2>Test</h2>
</a>

The animation in CSS:

.flash {
  -webkit-animation: flashing 0.5s infinite;
  animation: flashing 0.5s infinite;
}

@-webkit-keyframes flashing {
  0% {
    color: white;
  }
  50% {
    color: black;
  }
  100% {
    color: white;
  }
}

@keyframes flashing {
  0% {
    color: white;
  }
  50% {
    color: black;
  }
  100% {
    color: white;
  }
}

And the style for the h2 element itself:

h2 {
  position: absolute;
  top: 93%;

  color: white;

  margin-left: 7%;
}

I expected the link to flash infinitely, but nothing happened. It just stays white. As said before, the animations works when Vue is not loaded.

Vue doesn't block keyframes/animation. have you declared isFlashing? maybe try this without conditional class? — Ninth Autumn
– Ninth Autumn, Commented May 25, 2019 at 15:49
I already tried it without a conditional class. It also didn't work. So you can't see any mistake in the code itself? — Vntto
– Vntto, Commented May 25, 2019 at 15:54

Halim · Accepted Answer · 2019-05-25 16:49:01Z

1

in the h2 styles: color: white; will override the animation color rules.

Either remove color: white; from the h2 styles, or add the class flash to the h2 element, instead of the a element.

answered May 25, 2019 at 16:49

Halim

5274 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Walter Schreppers · Accepted Answer · 2023-10-09 15:53:01Z

0

Had same problem today. The problem is the parsing in "style scoped" and "style" tags on a .vue file does not support keyframe with % in it.

A 'hackish' workaround is to just include a style tag in your template with just the css containing those @keyframe lines.

<template>
  <link rel="stylesheet" href="./src/assets/keyframe_animation.css"/>

  your other template html here
</template>

<style scoped>
regular/other css here
</style>

This way you avoid the css needing to get parsed (however this has drawbacks like that css will also not be minified etc.) But it does start to work again that way.

answered Oct 9, 2023 at 15:53

Walter Schreppers

5384 silver badges6 bronze badges

Collectives™ on Stack Overflow

Why are @keyframes animations not working with Vue.js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related