backpack-ui/dist/utils/keyframes.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.spin = exports.heartbeat = exports.flyIn = exports.bookingLoaderFade = exports.pulseOpacity = undefined;
exports.default = keyframes;

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var pulseOpacity = exports.pulseOpacity = _radium2.default.keyframes({
  "0%": {
    opacity: 0.55
  },
  "50%": {
    opacity: 1
  },
  "100%": {
    opacity: 0.55
  }
}); /**
     * Define keyframes for CSS animation via Radium
     * https://github.com/formidablelabs/radium/tree/master/docs/api#keyframes
     */

var bookingLoaderFade = exports.bookingLoaderFade = _radium2.default.keyframes({
  "0%": {
    opacity: 0.3
  },
  "100%": {
    opacity: 1
  }
});

var flyIn = exports.flyIn = _radium2.default.keyframes({
  "0%": {
    opacity: 0,
    transform: "translate(-25rem)",
    width: "150%"
  },
  "100%": {
    opacity: 1,
    transform: "translate(0)",
    width: "150%"
  }
});

var heartbeat = exports.heartbeat = _radium2.default.keyframes({
  "0%": {
    transform: "scale(1)"
  },
  "5%": {
    transform: "scale(1.3)"
  },
  "10%": {
    transform: "scale(1)"
  },
  "15%": {
    transform: "scale(1.3)"
  },
  "20%": {
    transform: "scale(1)"
  }
});

var spin = exports.spin = _radium2.default.keyframes({
  "0%": {
    transform: "rotate(0)"
  },
  "100%": {
    transform: "rotate(360deg)"
  }
});

function keyframes() {
  return {
    bookingLoaderFade: bookingLoaderFade,
    flyIn: flyIn,
    heartbeat: heartbeat,
    spin: spin
  };
}