Animation/Keyframe equivalent to transform.js
Shfty opened this issue · comments
Recently I've been trying to reduce the amount of CSS in my fork of Enyo Books. As it stands, the css file has four -(framework)-keyframe and four -(framework)-animation lines for each definition (webkit, moz, o and ms) which really starts to add up when more keyframes/animations get added. Would it be possible to implement a similar cross-platform solution for -webkit-keyframes and -webkit-animation? Or am I doomed to copy-paste-edit for all eternity?
The problem with keyframes is that they live purely in CSS. There's no DOM style that belongs to a keyframe, so javascript can't really attach a keyframe to anything. I suppose it would be possible to make a new <style> tag with the keyframe information and shove that into the dom.
If you're just looking to reduce the CSS headache, you can use SASS or LESS to just write keyframes the prefix-free way and have those tools generate the prefixed versions.
Sounds like a use case that the tools really weren't designed for. I've been talking to the guy behind Books, and it looks like enyo.Animator is another great way to reduce CSS headache. Thanks for the help :)
Since this issue is closed, I'll add an FYI in here: My library, Rekapi, does something similar to what you are asking for. You can create keyframe animations in JavaScript and export them as cross browser CSS @keyframes.
It's not a competitor to Enyo, just a helpful keyframe animation library.