[SalesForce] Any way to include @keyframes in Lightning Component CSS file

I need to perform some CSS animations in my Lightning Component, which will require a @keyframes style such as:

@keyframes flashHeader {
    0%   {background-color: black; color: white;}
    25%  {background-color: white; color: black;}
    50%  {background-color: black; color: white;}
    75%  {background-color: white; color: black;}
    100% {background-color: black; color: white;}
}

When I try to include this in the component's CSS file, I get an error when trying to save (forget the exact error, but it's basically a syntax error of some kind).

I have to save it as a static resource instead, and pull it in with ltng:require

Does anybody know if it's possible to include @keyframes entries in the CSS file? I've read that you can put @media entries in there, so was curious about @keyframes. Thanks!

Best Answer

It does work; I just created this in my developer org (Winter 17):

<aura:application >
<p class="flashing">Hello World</p> 
</aura:application>

.THIS.flashing {
    animation-name: flashHeader;
    animation-duration: 5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}
@keyframes flashHeader {
    0%   {background-color: black; color: white;}
    25%  {background-color: white; color: black;}
    50%  {background-color: black; color: white;}
    75%  {background-color: white; color: black;}
    100% {background-color: black; color: white;}
}

I tried to get a good screen capture of it, but I couldn't get it to export correctly. The point is, it definitely does work.

Additional Edit: I also tested this as a component, with the same effect. It works either way.

Demo

Follow this screencast link to see live demo of flashing "Hello, World!" text

https://www.screencast.com/t/0S2AzHd8Au

Related Topic