marionette.modal 1.0.0

data/examples/vendor/marionette.modal.css

@@ -0,0 +1,24 @@
+/* Modal positioning */
+.bbm-wrapper {
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  padding: 50px 10px;
+  overflow-x: auto;
+  overflow-y: scroll; }
+  .bbm-wrapper * {
+    box-sizing: border-box; }
+
+.bbm-modal {
+  border-radius: 3px;
+  margin: auto;
+  width: auto;
+  max-width: 550px; }
+
+.bbm-views {
+  width: 100%;
+  box-sizing: border-box; }

data/examples/vendor/marionette.modal.js

@@ -0,0 +1,370 @@
+(function() {
+  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
+    __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  if (typeof Marionette === "undefined" || Marionette === null) {
+    throw new Error("Marionette is not defined. Please include the latest version from https://github.com/marionettejs/backbone.marionette");
+  }
+
+  Backbone.Modal = (function(_super) {
+    __extends(Modal, _super);
+
+    Modal.prototype.prefix = 'bbm';
+
+    function Modal() {
+      this.triggerCancel = __bind(this.triggerCancel, this);
+      this.triggerSubmit = __bind(this.triggerSubmit, this);
+      this.triggerView = __bind(this.triggerView, this);
+      this.clickOutside = __bind(this.clickOutside, this);
+      this.checkKey = __bind(this.checkKey, this);
+      this.args = Array.prototype.slice.apply(arguments);
+      Marionette.View.prototype.constructor.apply(this, this.args);
+      this.setUIElements();
+      this.delegateModalEvents();
+    }
+
+    Modal.prototype.render = function(options) {
+      var data, _ref,
+        _this = this;
+      if (options == null) {
+        options = {};
+      }
+      data = this.serializeData();
+      this.$el.addClass("" + this.prefix + "-wrapper");
+      this.modalEl = Marionette.$('<div />').addClass("" + this.prefix + "-modal");
+      if (this.template) {
+        this.modalEl.html(this.template(data));
+      }
+      this.$el.html(this.modalEl);
+      Marionette.$('body').on('keyup', this.checkKey);
+      Marionette.$('body').on('click', this.clickOutside);
+      if (this.viewContainer) {
+        this.viewContainerEl = this.modalEl.find(this.viewContainer);
+        this.viewContainerEl.addClass("" + this.prefix + "-modal__views");
+      } else {
+        this.viewContainerEl = this.modalEl;
+      }
+      this.$el.show();
+      if (((_ref = this.views) != null ? _ref.length : void 0) > 0) {
+        this.openAt(0);
+      }
+      if (typeof this.onRender === "function") {
+        this.onRender();
+      }
+      this.modalEl.css({
+        opacity: 0
+      });
+      this.$el.fadeIn({
+        duration: 100,
+        complete: function() {
+          return _this.modalEl.css({
+            opacity: 1
+          }).addClass("" + _this.prefix + "-modal--open");
+        }
+      });
+      return this;
+    };
+
+    Modal.prototype.setUIElements = function() {
+      var _ref;
+      this.template = Marionette.getOption(this, 'template');
+      this.views = Marionette.getOption(this, 'views');
+      if ((_ref = this.views) != null) {
+        _ref.length = _.size(this.views);
+      }
+      this.viewContainer = Marionette.getOption(this, 'viewContainer');
+      this.$el.hide();
+      if (_.isUndefined(this.template) && _.isUndefined(this.views)) {
+        throw new Error('No template or views defined for Backbone.Modal');
+      }
+      if (this.template && this.views && _.isUndefined(this.viewContainer)) {
+        throw new Error('No viewContainer defined for Backbone.Modal');
+      }
+    };
+
+    Modal.prototype.serializeData = function() {
+      var data;
+      data = {};
+      if (this.model) {
+        data = _.extend(data, this.model.toJSON());
+      }
+      if (this.collection) {
+        data = _.extend(data, {
+          items: this.collection.toJSON()
+        });
+      }
+      return data;
+    };
+
+    Modal.prototype.delegateModalEvents = function() {
+      var cancelEl, key, match, selector, submitEl, trigger, _results;
+      this.active = true;
+      cancelEl = Marionette.getOption(this, 'cancelEl');
+      submitEl = Marionette.getOption(this, 'submitEl');
+      if (submitEl) {
+        this.$el.on('click', submitEl, this.triggerSubmit);
+      }
+      if (cancelEl) {
+        this.$el.on('click', cancelEl, this.triggerCancel);
+      }
+      _results = [];
+      for (key in this.views) {
+        if (key !== 'length') {
+          match = key.match(/^(\S+)\s*(.*)$/);
+          trigger = match[1];
+          selector = match[2];
+          _results.push(this.$el.on(trigger, selector, this.views[key], this.triggerView));
+        } else {
+          _results.push(void 0);
+        }
+      }
+      return _results;
+    };
+
+    Modal.prototype.undelegateModalEvents = function() {
+      var cancelEl, key, match, selector, submitEl, trigger, _results;
+      this.active = false;
+      cancelEl = this.getOption('cancelEl');
+      submitEl = this.getOption('submitEl');
+      if (submitEl) {
+        this.$el.off('click', submitEl, this.triggerSubmit);
+      }
+      if (cancelEl) {
+        this.$el.off('click', cancelEl, this.triggerCancel);
+      }
+      _results = [];
+      for (key in this.views) {
+        if (key !== 'length') {
+          match = key.match(/^(\S+)\s*(.*)$/);
+          trigger = match[1];
+          selector = match[2];
+          _results.push(this.$el.off(trigger, selector, this.views[key], this.triggerView));
+        } else {
+          _results.push(void 0);
+        }
+      }
+      return _results;
+    };
+
+    Modal.prototype.checkKey = function(e) {
+      if (this.active) {
+        switch (e.keyCode) {
+          case 27:
+            return this.triggerCancel();
+          case 13:
+            return this.triggerSubmit();
+        }
+      }
+    };
+
+    Modal.prototype.clickOutside = function(e) {
+      if (Marionette.$(e.target).hasClass("" + this.prefix + "-wrapper") && this.active) {
+        return this.triggerCancel(null, true);
+      }
+    };
+
+    Modal.prototype.buildView = function(viewType) {
+      var view;
+      if (!viewType) {
+        return;
+      }
+      if (_.isFunction(viewType)) {
+        view = new viewType(this.args[0]);
+        if (view instanceof Backbone.View) {
+          return {
+            el: view.render().$el,
+            view: view
+          };
+        } else {
+          return {
+            el: viewType(this.args[0])
+          };
+        }
+      }
+      return {
+        view: viewType,
+        el: viewType.$el
+      };
+    };
+
+    Modal.prototype.triggerView = function(e) {
+      var index, instance, key, options;
+      if (e != null) {
+        if (typeof e.preventDefault === "function") {
+          e.preventDefault();
+        }
+      }
+      options = e.data;
+      instance = this.buildView(options.view);
+      if (this.currentView) {
+        this.previousView = this.currentView;
+      }
+      this.currentView = instance.view || instance.el;
+      index = 0;
+      for (key in this.views) {
+        if (options.view === this.views[key].view) {
+          this.currentIndex = index;
+        }
+        index++;
+      }
+      if (options.onActive) {
+        if (_.isFunction(options.onActive)) {
+          options.onActive(this);
+        } else if (_.isString(options.onActive)) {
+          this[options.onActive].call(this, options);
+        }
+      }
+      if (this.shouldAnimate) {
+        return this.animateToView(instance.el);
+      } else {
+        this.shouldAnimate = true;
+        return this.$(this.viewContainerEl).html(instance.el);
+      }
+    };
+
+    Modal.prototype.animateToView = function(view) {
+      var container, newHeight, previousHeight, style, tester, _ref,
+        _this = this;
+      style = {
+        position: 'relative',
+        top: -9999,
+        left: -9999
+      };
+      tester = Marionette.$('<tester/>').css(style);
+      tester.html(this.$el.clone().css(style));
+      if (Marionette.$('tester').length !== 0) {
+        Marionette.$('tester').replaceWith(tester);
+      } else {
+        Marionette.$('body').append(tester);
+      }
+      if (this.viewContainer) {
+        container = tester.find(this.viewContainer);
+      } else {
+        container = tester.find("." + this.prefix + "-modal");
+      }
+      container.removeAttr('style');
+      previousHeight = container.outerHeight();
+      container.html(view);
+      newHeight = container.outerHeight();
+      if (previousHeight === newHeight) {
+        this.$(this.viewContainerEl).html(view);
+        return (_ref = this.previousView) != null ? typeof _ref.close === "function" ? _ref.close() : void 0 : void 0;
+      } else {
+        this.$(this.viewContainerEl).css({
+          opacity: 0
+        });
+        return this.$(this.viewContainerEl).animate({
+          height: newHeight
+        }, 100, function() {
+          var _ref1;
+          _this.$(_this.viewContainerEl).css({
+            opacity: 1
+          }).removeAttr('style');
+          _this.$(_this.viewContainerEl).html(view);
+          return (_ref1 = _this.previousView) != null ? typeof _ref1.close === "function" ? _ref1.close() : void 0 : void 0;
+        });
+      }
+    };
+
+    Modal.prototype.triggerSubmit = function(e) {
+      if (!e) {
+        return;
+      }
+      if (e != null) {
+        e.preventDefault();
+      }
+      if (this.beforeSubmit) {
+        if (this.beforeSubmit() === false) {
+          return;
+        }
+      }
+      if (typeof this.submit === "function") {
+        this.submit();
+      }
+      if (this.regionEnabled) {
+        return this.trigger('modal:close');
+      } else {
+        return this.close();
+      }
+    };
+
+    Modal.prototype.triggerCancel = function(e) {
+      if (e != null) {
+        e.preventDefault();
+      }
+      if (this.beforeCancel) {
+        if (this.beforeCancel() === false) {
+          return;
+        }
+      }
+      if (typeof this.cancel === "function") {
+        this.cancel();
+      }
+      if (this.regionEnabled) {
+        return this.triggerMethod('modal:close');
+      } else {
+        return this.close();
+      }
+    };
+
+    Modal.prototype.close = function() {
+      var _this = this;
+      Marionette.$('body').off('keyup', this.checkKey);
+      Marionette.$('body').off('click', this.clickOutside);
+      if (typeof this.onClose === "function") {
+        this.onClose();
+      }
+      this.shouldAnimate = false;
+      this.modalEl.addClass("" + this.prefix + "-modal--close");
+      this.$el.fadeOut({
+        duration: 200
+      });
+      return _.delay(function() {
+        var _ref;
+        if ((_ref = _this.currentView) != null) {
+          if (typeof _ref.remove === "function") {
+            _ref.remove();
+          }
+        }
+        return _this.remove();
+      }, 200);
+    };
+
+    Modal.prototype.openAt = function(index) {
+      var i, key, view;
+      i = 0;
+      for (key in this.views) {
+        if (key !== 'length') {
+          if (i === index) {
+            view = this.views[key];
+          }
+          i++;
+        }
+      }
+      if (view) {
+        this.currentIndex = index;
+        this.triggerView({
+          data: view
+        });
+      }
+      return this;
+    };
+
+    Modal.prototype.next = function() {
+      if (this.currentIndex + 1 < this.views.length) {
+        return this.openAt(this.currentIndex + 1);
+      }
+    };
+
+    Modal.prototype.previous = function() {
+      if (this.currentIndex - 1 < this.views.length - 1) {
+        return this.openAt(this.currentIndex - 1);
+      }
+    };
+
+    return Modal;
+
+  })(Marionette.View);
+
+}).call(this);

data/examples/vendor/marionette.modal.theme.css

@@ -0,0 +1,324 @@
+.bbm-wrapper {
+  background: rgba(0, 0, 0, 0.75);
+  -webkit-transition: background-color 0.3s; }
+
+.bbm-modal {
+  background: white;
+  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.9); }
+
+/* BLOCKS */
+.bbm-modal__topbar,
+.bbm-modal__bottombar {
+  padding: 0 30px; }
+
+.bbm-modal__topbar {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  margin-bottom: 30px; }
+  .bbm-modal__topbar > ul {
+    list-style: none;
+    text-align: center;
+    padding: 0;
+    margin: 0; }
+
+.bbm-modal__tab {
+  display: inline-block;
+  padding: 15px 10px; }
+  .bbm-modal__tab a {
+    font-size: 16px;
+    font-weight: bold;
+    color: #999999; }
+    .bbm-modal__tab a:hover, .bbm-modal__tab a.active {
+      color: #222222; }
+
+.bbm-modal__title {
+  padding: 20px 0 19px;
+  margin: 0;
+  font-weight: normal;
+  font-size: 22px;
+  line-height: 1em;
+  color: #312d3a; }
+
+.bbm-modal__section {
+  padding: 0 30px;
+  margin-top: 0px;
+  font-size: 16px;
+  line-height: 26px;
+  color: #575656; }
+  .bbm-modal__section p {
+    font-size: 16px;
+    line-height: 26px;
+    color: #575656; }
+    .bbm-modal__section p:last-child {
+      padding: 0;
+      margin-bottom: 0; }
+  .bbm-modal__section a {
+    color: #ff643c; }
+  .bbm-modal__section h3 {
+    margin: 0;
+    font-size: 20px;
+    line-height: 1em; }
+
+.bbm-modal__bottombar {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 18px;
+  text-align: right;
+  margin-top: 30px; }
+
+/* MODULES */
+.bbm-group {
+  content: "";
+  display: table;
+  clear: both; }
+
+.bbm-button {
+  display: inline-block;
+  color: rgba(49, 45, 58, 0.8);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  position: relative;
+  line-height: 1em;
+  padding: 10px 14px;
+  border-radius: 3px;
+  background: #fcfcfc;
+  background-image: -o-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
+  background-image: -moz-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
+  background-image: -webkit-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
+  background-image: -ms-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
+  background-image: linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
+  -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); }
+  .bbm-button.inactive {
+    opacity: 0.5;
+    pointer-events: none; }
+  .bbm-button:active {
+    background-image: -o-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
+    background-image: -moz-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
+    background-image: -webkit-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
+    background-image: -ms-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
+    background-image: linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
+    -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); }
+
+/* ANIMATIONS */
+/* Open modal */
+@-webkit-keyframes bbm-open {
+  0% {
+    -webkit-transform: matrix(0.99126, 0, 0, 0.99126, 0, 43.8813);
+    opacity: 0.1259; }
+
+  4% {
+    -webkit-transform: matrix(0.99295, 0, 0, 0.99295, 0, 45.06809);
+    opacity: 0.29544; }
+
+  8% {
+    -webkit-transform: matrix(0.99467, 0, 0, 0.99467, 0, 46.26922);
+    opacity: 0.46703; }
+
+  12% {
+    -webkit-transform: matrix(0.99619, 0, 0, 0.99619, 0, 47.33355);
+    opacity: 0.61908; }
+
+  16% {
+    -webkit-transform: matrix(0.99743, 0, 0, 0.99743, 0, 48.19991);
+    opacity: 0.74284; }
+
+  20% {
+    -webkit-transform: matrix(0.99837, 0, 0, 0.99837, 0, 48.86067);
+    opacity: 0.83724; }
+
+  24% {
+    -webkit-transform: matrix(0.99905, 0, 0, 0.99905, 0, 49.33658);
+    opacity: 0.90523; }
+
+  28% {
+    -webkit-transform: matrix(0.99952, 0, 0, 0.99952, 0, 49.66049);
+    opacity: 0.9515; }
+
+  32% {
+    -webkit-transform: matrix(0.99981, 0, 0, 0.99981, 0, 49.8675);
+    opacity: 0.98107; }
+
+  36% {
+    -webkit-transform: matrix(0.99999, 0, 0, 0.99999, 0, 49.98966);
+    opacity: 0.99852; }
+
+  40% {
+    -webkit-transform: matrix(1.00008, 0, 0, 1.00008, 0, 50.05361);
+    opacity: 1.00766; }
+
+  44% {
+    -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.08);
+    opacity: 1.01143; }
+
+  48% {
+    -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08394);
+    opacity: 1.01199; }
+
+  52% {
+    -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.07589);
+    opacity: 1.01084; }
+
+  56% {
+    -webkit-transform: matrix(1.00009, 0, 0, 1.00009, 0, 50.06265);
+    opacity: 1.00895; }
+
+  60% {
+    -webkit-transform: matrix(1.00007, 0, 0, 1.00007, 0, 50.04833);
+    opacity: 1.0069; }
+
+  64% {
+    -webkit-transform: matrix(1.00005, 0, 0, 1.00005, 0, 50.03518);
+    opacity: 1.00503; }
+
+  68% {
+    -webkit-transform: matrix(1.00004, 0, 0, 1.00004, 0, 50.02421);
+    opacity: 1.00346; }
+
+  72% {
+    -webkit-transform: matrix(1.00002, 0, 0, 1.00002, 0, 50.01567);
+    opacity: 1.00224; }
+
+  76% {
+    -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00941);
+    opacity: 1.00134; }
+
+  80% {
+    -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00506);
+    opacity: 1.00072; }
+
+  84% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 50.00223);
+    opacity: 1.00032; }
+
+  88% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 50.0005);
+    opacity: 1.00007; }
+
+  92% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99956);
+    opacity: 0.99994; }
+
+  96% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99913);
+    opacity: 0.99988; }
+
+  100% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 50);
+    opacity: 1; } }
+
+.bbm-modal--open {
+  -webkit-animation-duration: 0.3s;
+  -webkit-animation-name: bbm-open;
+  -webkit-animation-timing-function: linear;
+  -webkit-animation-fill-mode: both;
+  -webkit-transform-origin: 50% 50%;
+  -webkit-backface-visibility: hidden; }
+
+/* Open a stacked modal */
+@-webkit-keyframes bbm-stacked {
+  0% {
+    -webkit-transform: matrix(0.99874, 0, 0, 0.99874, 0, 49.1187);
+    opacity: 0.93705; }
+
+  4% {
+    -webkit-transform: matrix(0.99705, 0, 0, 0.99705, 0, 47.93192);
+    opacity: 0.85228; }
+
+  8% {
+    -webkit-transform: matrix(0.99533, 0, 0, 0.99533, 0, 46.73078);
+    opacity: 0.76648; }
+
+  12% {
+    -webkit-transform: matrix(0.99381, 0, 0, 0.99381, 0, 45.66645);
+    opacity: 0.69046; }
+
+  16% {
+    -webkit-transform: matrix(0.99257, 0, 0, 0.99257, 0, 44.80009);
+    opacity: 0.62858; }
+
+  20% {
+    -webkit-transform: matrix(0.99163, 0, 0, 0.99163, 0, 44.13933);
+    opacity: 0.58138; }
+
+  24% {
+    -webkit-transform: matrix(0.99095, 0, 0, 0.99095, 0, 43.66342);
+    opacity: 0.54739; }
+
+  28% {
+    -webkit-transform: matrix(0.99049, 0, 0, 0.99049, 0, 43.33951);
+    opacity: 0.52425; }
+
+  32% {
+    -webkit-transform: matrix(0.99019, 0, 0, 0.99019, 0, 43.1325);
+    opacity: 0.50946; }
+
+  36% {
+    -webkit-transform: matrix(0.99002, 0, 0, 0.99002, 0, 43.01034);
+    opacity: 0.50074; }
+
+  40% {
+    -webkit-transform: matrix(0.98992, 0, 0, 0.98992, 0, 42.94639);
+    opacity: 0.49617; }
+
+  44% {
+    -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92001);
+    opacity: 0.49429; }
+
+  48% {
+    -webkit-transform: matrix(0.98988, 0, 0, 0.98988, 0, 42.91606);
+    opacity: 0.494; }
+
+  52% {
+    -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92411);
+    opacity: 0.49458; }
+
+  56% {
+    -webkit-transform: matrix(0.98991, 0, 0, 0.98991, 0, 42.93736);
+    opacity: 0.49553; }
+
+  60% {
+    -webkit-transform: matrix(0.98993, 0, 0, 0.98993, 0, 42.95167);
+    opacity: 0.49655; }
+
+  64% {
+    -webkit-transform: matrix(0.98995, 0, 0, 0.98995, 0, 42.96482);
+    opacity: 0.49749; }
+
+  68% {
+    -webkit-transform: matrix(0.98997, 0, 0, 0.98997, 0, 42.97579);
+    opacity: 0.49827; }
+
+  72% {
+    -webkit-transform: matrix(0.98998, 0, 0, 0.98998, 0, 42.98433);
+    opacity: 0.49888; }
+
+  76% {
+    -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99059);
+    opacity: 0.49933; }
+
+  80% {
+    -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99494);
+    opacity: 0.49964; }
+
+  84% {
+    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.99777);
+    opacity: 0.49984; }
+
+  88% {
+    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.9995);
+    opacity: 0.49996; }
+
+  92% {
+    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00044);
+    opacity: 0.50003; }
+
+  96% {
+    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00088);
+    opacity: 0.50006; }
+
+  100% {
+    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43);
+    opacity: 0.5; } }