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!

Answer

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

Attribution
Source : Link , Question Author : Florissant53 , Answer Author : sfdcfox