CSS animation in LWC not working

Question

I'm unable to get a simple css fade-in-out text animation to work in LWC. The text displays on the page okay, but it does not fade in/out like expected. It seems as though the keyframes are getting stripped out somehow. Am I missing something here?

Here's the component:

fadingText.html

<template>
    <div class="animate-flicker">Some Text</div>
</template>

fadingText.css

@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.animate-flicker {
  -webkit-animation: flickerAnimation 1s infinite;
  -moz-animation: flickerAnimation 1s infinite;
  -o-animation: flickerAnimation 1s infinite;
  animation: flickerAnimation 1s infinite;
}

fadingText.js

import { LightningElement } from 'lwc';

export default class FadingText extends LightningElement {}

The styles all appear to be correct in Chrome dev tools:

Here's the same code working correctly in codepen: https://codepen.io/scottmcclung/pen/KEyomY

Answer 1

Was able to sort out a workaround to get this functioning. By importing a stylesheet with the keyframes in it, we can avoid the current impact of the compiler. The 'third party library' examples in the developer docs gave me the hint for this technique.
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_third_party_library

Here's what the working component looks like now.

fadingText.css - Deleted

fadingText.html

<template>
  <div class="animate-flicker">Some Text</div>
</template>

fadingText.js

import { LightningElement } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import styles from '@salesforce/resourceUrl/styles';

export default class FadingText extends LightningElement {
  connectedCallback() {
    loadStyle(this, styles)
  }
}

styles.css - Uploaded as a static resource

.animate-flicker {
  -webkit-animation: flickerAnimation 1s infinite !important;
  -moz-animation: flickerAnimation 1s infinite !important;
  -o-animation: flickerAnimation 1s infinite !important;
  animation: flickerAnimation 1s infinite !important;
}

@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Answer 2

You have stumbled upon a bug in Lightning Web Components. When you write your CSS in the CSS file, Salesforce tries to do some optimisations to it like minifying it, adding attribute selectors (possibly to scope the CSS within the component).

When you define your keyframe offsets (0%, 50%, 100%), Salesforce incorrectly thinks it is also a CSS selector and adds the attributes to them, rendering them syntactically incorrect that the browser doesn't understand.

Here's how Salesforce renders your CSS in the browsers after its optimisations:

Here's what the correct output from Salesforce should be for this to work (you can try editing the above output to the below one in Chrome Dev tool's Elements tab and you will see the expected animation).