toCSS
methodKapi.prototype.toCSS()
With toCSS
, Rekapi can export your animations as CSS @keyframes
. toCSS
depends on Kapi.DOMActor
. This function only builds and returns a string of CSS, it has no other side effects. To actually run a CSS @keyframe
animation, see CSSRenderer
(which wraps this function).
Exporting
To create a CSS string:
var container = document.getElementById('container');
var animation = new Kapi(container);
var css = animation.toCSS();
Remember, all toCSS
does is render a string. The most useful thing to do with this string is to stick it into a <style>
element somewhere on your page. Continuing from above:
var style = document.createElement('style');
style.innerHTML = css;
document.head.appendChild(style);
Please be aware that CSSRenderer
makes this process much simpler.
opts
You can specify some parameters for your CSS animation. They are all optional. Just supply them in the opts
parameter when calling toCSS
:
- vendors (Array): Defaults to
['w3']
. The browser vendors you want this CSS to support. Valid values are:'microsoft'
'mozilla'
'opera'
'w3'
'webkit'
- fps (number): Defaults to 30. Defines the "resolution" of an exported animation. CSS
@keyframes
are comprised of a series of explicitly defined keyframe steps, and more steps will allow for a more complex animation. More steps will also result in a larger CSS string, and more time needed to generate the string. There's no reason to go beyond 60, as the human eye cannot perceive motion smoother than that. - name (string): Define a custom name for your animation. This becomes the class name targeted by the generated CSS. If omitted, the value is the same as the CSS class that was added when the DOM element was used to initialize its
Kapi.DOMActor
. - isCentered (boolean): If
true
, the generated CSS will containtransform-origin: 0 0;
, which centers the DOM element along the path of motion. Iffalse
or omitted, notransform-origin
rule is specified and the element is aligned to the path of motion with its top-left corner. - iterations (number): How many times the generated animation should repeat. If omitted, the animation will loop indefinitely.
Kapi.prototype.toCSS = function (opts) {
opts = opts || {};
var animationCSS = [];
_.each(this.getAllActors(), function (actor) {
if (actor instanceof Kapi.DOMActor) {
animationCSS.push(actor.toCSS(opts));
}
});
return animationCSS.join('\n');
};