CSS animation in LWC not working

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:

enter image description here

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

Answer

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;
  }
}

Attribution
Source : Link , Question Author : Scott McClung , Answer Author : Scott McClung

Leave a Comment