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
Best 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
fadingText.js
styles.css - Uploaded as a static resource