Source

styledComponents/getShakeAnimCss.js

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_SHAKE_DURATION = void 0;
var macro_1 = require("styled-components/macro");
exports.DEFAULT_SHAKE_DURATION = 820;
var shakeAnim = (0, macro_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  10%,\n  90% {\n    transform: translate3d(-1px, 0, 0);\n  }\n\n  20%,\n  80% {\n    transform: translate3d(2px, 0, 0);\n  }\n\n  30%,\n  50%,\n  70% {\n    transform: translate3d(-4px, 0, 0);\n  }\n\n  40%,\n  60% {\n    transform: translate3d(4px, 0, 0);\n  }\n"], ["\n  10%,\n  90% {\n    transform: translate3d(-1px, 0, 0);\n  }\n\n  20%,\n  80% {\n    transform: translate3d(2px, 0, 0);\n  }\n\n  30%,\n  50%,\n  70% {\n    transform: translate3d(-4px, 0, 0);\n  }\n\n  40%,\n  60% {\n    transform: translate3d(4px, 0, 0);\n  }\n"
    /**
     * Ref: https://css-tricks.com/snippets/css/shake-css-keyframe-animation/
     *
     * @param {number} duration Duration in milliseconds (ms)
     * @returns return styled css
     * @category styledComponents
     * @module getShakeAnimCss
     */
])));
/**
 * Ref: https://css-tricks.com/snippets/css/shake-css-keyframe-animation/
 *
 * @param {number} duration Duration in milliseconds (ms)
 * @returns return styled css
 * @category styledComponents
 * @module getShakeAnimCss
 */
var getShakeAnimCss = function (duration) {
    if (duration === void 0) { duration = exports.DEFAULT_SHAKE_DURATION; }
    return (0, macro_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: ", " ", "ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n  transform: translate3d(0, 0, 0);\n  backface-visibility: hidden;\n  perspective: 1000px;\n"], ["\n  animation: ", " ", "ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n  transform: translate3d(0, 0, 0);\n  backface-visibility: hidden;\n  perspective: 1000px;\n"])), shakeAnim, duration);
};
exports.default = getShakeAnimCss;
var templateObject_1, templateObject_2;