@keyframes not prefixed

[nanashiRei]

I have buttons on my page that use @keyframes animation { ... } for a neat effect. However, vendor prefixes suck, so i started using CSS3-Finalize. But now it doesn't prefix the @keyframes selector, nor does it prefix any of the attributes in any of it's bodies properties.

My CSS snippet:

/*** gangnam box style ***/
@keyframes packAnimation {
  from { transform: scale(1,1); }
  to { transform: scale(1.1,1.1); }
}

I made it a little more simple. Doesn't affect the css3-finalize behavior tho.

If you have some luck, my test server might be running at the time you want to check:
http://web.yas-online.net:2021/beatmap-list.html
feel free to check it out.

[codler]

What browser are you testing on?

[nanashiRei]

Oh sorry, forgot, i tested with Chrome and IE9 i can't really do more from here. I could try this at home with FF16 and IE10.

[codler]

I made a simple test http://jsfiddle.net/JAbzx/ and found, It do prefix keyframe, but doesnt prefix the shorthand animation.
Ill look for a solution.

[nanashiRei]

So i can fix this by using the longhands for now? Thanks for the quick reply.

[codler]

yes

[nanashiRei]

Okay i have tested this solution with all common browsers, except IE10 now. IE9 doesn't work, but that's because IE9 is shit 🔙 to topic:

Here is the snipped that works:

@keyframes packAnimation {
  from { transform: scale(1,1); }
  to { transform: scale(1.1,1.1); }
}

.packs .pack:hover { animation-name: packAnimation;
                     animation-duration: 0.3s;
                     animation-iteration-count: infinite;
                     animation-direction: alternate;
                     box-shadow: 0 0 7px rgb(255, 176, 28);
                     background-color: rgb(255, 176, 28);
                     color: #2f2f2f; 
                     text-shadow: 0 0 6px white; }

[codler]

IE9 dont have keyframes or animation

[nanashiRei]

That's what i meant to say :)

[codler]

fixed

[nanashiRei]

Works perfectly fine now, thanks! 😃