Rekapi ext/to-css/rekapi.to-css.js

toCSS

method
Kapi.prototype.toCSS()
  • @param: {Object}opts
  • @return: {string}

Description

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 contain transform-origin: 0 0;, which centers the DOM element along the path of motion. If false or omitted, no transform-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.

Source

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