11

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!

  • Perhaps there was some surrounding/nearby css that was screwing it up? The animation works just fine in both my Winter 17 and Spring 17 orgs. – sfdcfox Feb 10 '17 at 14:14
13

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

| improve this answer | |
  • 1
    Pleasure is all mine. Every time I read your posts, I learn something new. – Mahmood Feb 10 '17 at 14:32
  • Interesting - thanks! I switched from using developer console to a third-party IDE tool, and just assumed (stupid me) that the errors it was throwing were coming from Salesforce. It must be the IDE that's trying to do some syntax checking on its own, and choking on the keyframes. I'll file a bug with them, and use the developer console for CSS files that require keyframes. Thanks! – Florissant53 Feb 11 '17 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.