@nutui/nutui 3.3.1 → 4.0.0-beta.0

package/dist/types/utils/interceptor.d.ts

@@ -0,0 +1,6 @@
+export type Interceptor = (...args: any[]) => Promise<boolean> | boolean | undefined | void;
+export declare const funInterceptor: (interceptor: Interceptor | undefined, { args, done, canceled }: {
+    args?: unknown[] | undefined;
+    done: (val?: any) => void;
+    canceled?: (() => void) | undefined;
+}) => void;

package/dist/types/utils/pxCheck.d.ts

@@ -0,0 +1 @@
+export declare const pxCheck: (value: string | number) => string;

package/dist/types/utils/raf.d.ts

@@ -0,0 +1,4 @@
+export declare const inBrowser: boolean;
+export declare function cancelRaf(id: number): void;
+declare const _default: any;
+export default _default;

package/dist/types/utils/throttle.d.ts

@@ -0,0 +1,2 @@
+export declare function debounce(fn: Function, delay: number): () => void;
+export declare function throttle(fn: Function, delay: number): () => void;

package/dist/types/utils/unit.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPublicInstance } from 'vue';
+import { VueWrapper, DOMWrapper } from '@vue/test-utils';
+export declare function trigger(wrapper: VueWrapper<ComponentPublicInstance<any, any, any>> | DOMWrapper<Element> | Element | Window, eventName: string, x?: number, y?: number, options?: any): Promise<void>;
+export declare function mockScrollTop(value: number): Promise<void>;
+export declare function sleep(delay?: number): Promise<void>;
+export declare function triggerDrag(el: any, relativeX?: number, relativeY?: number): void;

package/dist/types/utils/useExpose/index.d.ts

@@ -0,0 +1 @@
+export declare function useExpose(apis: Record<string, any>): void;

package/dist/types/utils/useLockScroll/index.d.ts

@@ -0,0 +1 @@
+export declare const useLockScroll: (isLock: () => boolean) => (() => void)[];

package/dist/types/utils/useRect/index.d.ts

@@ -0,0 +1,17 @@
+import { Ref } from 'vue';
+export interface rect {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export declare const useRect: (elementRef: (Element | Window) | Ref<Element | Window | undefined>) => DOMRect | {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+};

package/dist/types/utils/useRelation/useInject.d.ts

@@ -0,0 +1,14 @@
+import type { InjectionKey, ComponentInternalInstance } from 'vue';
+type ParentProvide<T> = T & {
+    add(child: ComponentInternalInstance): void;
+    remove(child: ComponentInternalInstance): void;
+    internalChildren: ComponentInternalInstance[];
+};
+export declare function useInject<T>(key: InjectionKey<ParentProvide<T>>): {
+    parent: ParentProvide<T>;
+    index: import("vue").ComputedRef<number>;
+} | {
+    parent: null;
+    index: import("vue").Ref<number>;
+};
+export {};

package/dist/types/utils/useRelation/useProvide.d.ts

@@ -0,0 +1,8 @@
+import type { VNode, InjectionKey, VNodeNormalizedChildren, ComponentInternalInstance } from 'vue';
+export declare function flattenVNodes(children: VNodeNormalizedChildren, childName?: string): VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[];
+export declare function sortChildren(parent: ComponentInternalInstance, internalChildren: ComponentInternalInstance[], childName?: string): void;
+export declare function useProvide<ProvideValue>(key: InjectionKey<ProvideValue>, childName?: string): (value?: ProvideValue) => {
+    internalChildren: ComponentInternalInstance[];
+};

package/dist/types/utils/useRelation/useRelation.d.ts

@@ -0,0 +1 @@
+export declare function useExtend<T>(apis: T): void;

package/dist/types/utils/useRoute/index.d.ts

@@ -0,0 +1 @@
+export declare function useRouter(): any;

package/dist/types/utils/useScrollParent/index.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'vue';
+type ScrollElement = HTMLElement | Window;
+export declare function getScrollParent(el: Element, root?: ScrollElement | undefined): Window | Element;
+export declare function useScrollParent(el: Ref<Element | undefined>, root?: ScrollElement | undefined): Ref<Window | Element | undefined>;
+export {};

package/dist/types/utils/useTaroRect/index.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+export interface rectTaro {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export declare const useTaroRect: (elementRef: (Element | Window | any) | Ref<Element | Window | any>, Taro: any) => any;

package/dist/types/utils/useTouch/index.d.ts

@@ -0,0 +1,18 @@
+type Direction = '' | 'vertical' | 'horizontal';
+export declare function useTouch(): {
+    move: EventListener;
+    start: EventListener;
+    reset: () => void;
+    startX: import("vue").Ref<number>;
+    startY: import("vue").Ref<number>;
+    moveX: import("vue").Ref<number>;
+    moveY: import("vue").Ref<number>;
+    deltaX: import("vue").Ref<number>;
+    deltaY: import("vue").Ref<number>;
+    offsetX: import("vue").Ref<number>;
+    offsetY: import("vue").Ref<number>;
+    direction: import("vue").Ref<Direction>;
+    isVertical: () => boolean;
+    isHorizontal: () => boolean;
+};
+export {};

package/dist/types/utils/util.d.ts

@@ -0,0 +1,25 @@
+export * from './interceptor';
+export declare const TypeOfFun: (value: any) => "string" | "undefined" | "boolean" | "null" | "array" | "date" | "number" | "function" | "regexp" | "textnode" | "whitespace" | "element" | "object" | "unknow";
+export declare const objectToString: () => string;
+export declare const toTypeString: (value: unknown) => string;
+export declare const toRawType: (value: unknown) => string;
+export declare const isArray: (arg: any) => arg is any[];
+export declare const isMap: (val: unknown) => val is Map<any, any>;
+export declare const isSet: (val: unknown) => val is Set<any>;
+export declare const isDate: (val: unknown) => val is Date;
+export declare const isFunction: (val: unknown) => val is Function;
+export declare const isString: (val: unknown) => val is string;
+export declare const isSymbol: (val: unknown) => val is symbol;
+export declare const isObject: (val: unknown) => val is Record<any, any>;
+export declare const isPromise: <T = any>(val: unknown) => val is Promise<T>;
+export declare const win: Window & typeof globalThis;
+export declare const docu: Document;
+export declare const body: HTMLElement;
+export declare const getPropByPath: (obj: any, keyPath: string) => any;
+export declare const floatData: (format: any, dataOp: any, mapOps: any) => any;
+export declare const deepMerge: (target: any, newObj: any) => any;
+export declare function myFixed(num: any, digit?: number): string | void;
+export declare function preventDefault(event: Event, isStopPropagation?: boolean): void;
+export declare const padZero: (num: number | string, length?: number) => string;
+export declare const clamp: (num: number, min: number, max: number) => number;
+export declare const getScrollTopRoot: () => number;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@nutui/nutui",
-  "version": "3.3.1",
+  "version": "4.0.0-beta.0",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
-  "main": "dist/nutui.umd.js",
-  "module": "dist/nutui.es.js",
+  "main": "dist/nutui.umd.cjs",
+  "module": "dist/nutui.js",
   "style": "dist/style.css",
+  "type": "module",
   "typings": "dist/types/index.d.ts",
   "vetur": {
     "tags": "dist/smartips/tags.json",
@@ -40,33 +41,38 @@
   "scripts": {
     "checked": "npm run generate:file && tsc",
     "checked:taro:vue": "npm run generate:file:taro:vue",
-    "dev": "npm run checked && vite --open --force",
-    "dev:taro:weapp": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:weapp",
-    "dev:taro:alipay": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:alipay",
-    "dev:taro:jd": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:jd",
-    "dev:taro:h5": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:h5",
+    "dev": "npm run checked && npm run dts && vite --open --force",
+    "dev:taro:weapp": "npm run createTaroConfig && npm run checked:taro:vue && npm run dts && cd src/sites/mobile-taro/vue/ && npm run dev:weapp",
+    "dev:taro:alipay": "npm run createTaroConfig && npm run checked:taro:vue && npm run dts && cd src/sites/mobile-taro/vue/ && npm run dev:alipay",
+    "dev:taro:jd": "npm run createTaroConfig && npm run checked:taro:vue && npm run dts && cd src/sites/mobile-taro/vue/ && npm run dev:jd",
+    "dev:taro:h5": "npm run createTaroConfig && npm run checked:taro:vue && npm run dts && cd src/sites/mobile-taro/vue/ && npm run dev:h5",
     "build:site": "npm run checked && vite build",
     "build:site-jdt": "npm run checked && vite build --config vite.config.jdt.ts ",
-    "build:site:oss": "npm run checked && vite build --base=/nutui/3x/",
-    "build": "npm run checked && vite build --config vite.config.build.ts && vite build --config vite.config.build.disperse.ts && npm run generate:types && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && npm run attrs",
-    "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && vite build --config vite.config.build.taro.vue.disperse.ts && npm run generate:types:taro && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && npm run attrs",
+    "build:site:oss": "npm run checked && vite build --base=/nutui/4x/",
+    "build": "npm run checked && vite build --config vite.config.build.ts && vite build --config vite.config.build.disperse.ts && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && npm run dts && npm run attrs && npm run generate:style:deps",
+    "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && vite build --config vite.config.build.taro.vue.disperse.ts && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && npm run dts:taro && npm run attrs&& npm run generate:style:deps",
     "serve": "vite preview",
     "upload": "yarn build:site:oss && node ./jd/upload.js",
     "add": "node jd/createComponentMode.js",
     "publish:beta": "npm publish --tag=beta",
     "publish": "npm publish",
-    "generate:file": "node jd/generate-nutui.js",
-    "generate:file:taro:vue": "node jd/generate-nutui-taro-vue.js",
-    "generate:types": "node jd/generate-types.js",
-    "generate:types:taro": "node jd/generate-types-taro.js",
-    "generate:themes": "node jd/generate-themes.js",
+    "generate:file": "node jd/generate-nutui.cjs",
+    "generate:file:taro:vue": "node jd/generate-nutui-taro-vue.cjs",
+    "generate:types": "node jd/generate-types.cjs",
+    "generate:types:taro": "node jd/generate-types-taro.cjs",
+    "generate:themes": "node jd/generate-themes.cjs",
+    "generate:style:deps": "node jd/generate-style-deps.cjs",
     "prepare": "husky install",
     "test": "jest",
     "release": "standard-version -a",
     "codeformat": "prettier --write .",
-    "copydocs": "node ./jd/copymd.js",
-    "createTaroConfig": "node ./jd/generate-taro-route.js",
-    "attrs": "node ./jd/createAttributes.js"
+    "copydocs": "node ./jd/copymd.cjs",
+    "createTaroConfig": "node ./jd/generate-taro-route.cjs",
+    "attrs": "node ./jd/createAttributes.cjs",
+    "dts": "rm -rf ./tsc/type && vue-tsc --declaration --emitDeclarationOnly -p ./tsconfig.declaration.json && npm run generate:types",
+    "dts:taro": "rm -rf ./tsc/type && vue-tsc --declaration --emitDeclarationOnly -p ./tsconfig.declaration.taro.json && npm run generate:types:taro",
+    "copy:h5": "node ./jd/copyh5.cjs",
+    "copy:taro": "node ./jd/copytaro.cjs"
   },
   "standard-version": {
     "scripts": {
@@ -74,7 +80,9 @@
     }
   },
   "dependencies": {
-    "consola": "2.15.3",
+    "@nutui/icons-vue": "0.0.16",
+    "@nutui/icons-vue-taro": "0.0.2",
+    "@tarojs/components": "3.5.6",
     "sass": "^1.50.0",
     "vscode": "^1.1.37",
     "vue-router": "^4.0.12"
@@ -83,21 +91,20 @@
     "@commitlint/cli": "^10.0.0",
     "@commitlint/config-conventional": "^10.0.0",
     "@tarojs/taro": "3.5.6",
-    "@tarojs/components": "3.5.6",
     "@types/jest": "^26.0.22",
     "@types/node": "^17.0.16",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
     "@typescript-eslint/parser": "^4.20.0",
-    "@vitejs/plugin-legacy": "^1.6.4",
-    "@vitejs/plugin-vue": "^2.1.0",
-    "@vue/compiler-sfc": "^3.2.30",
+    "@vitejs/plugin-vue": "^3.2.0",
+    "@vue/compiler-dom": "^3.2.45",
+    "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "^2.0.0-rc.18",
     "autoprefixer": "^10.3.4",
     "axios": "^0.21.0",
-    "canvas": "^2.10.2",
-    "cz-git": "^1.3.8",
+    "canvas": "^2.9.0",
+    "codesandbox": "^2.2.3",
     "eslint": "^7.23.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.8.0",
@@ -109,19 +116,21 @@
     "jest": "^26.6.3",
     "lint-staged": "^10.5.0",
     "lzutf8": "0.6.0",
+    "markdown-it": "^13.0.1",
     "markdown-it-container": "^3.0.0",
     "prettier": "^2.0.0",
     "remark-codesandbox": "^0.10.1",
+    "rollup-plugin-visualizer": "^5.8.3",
     "standard-version": "^9.3.0",
     "swiper": "6.5.1",
     "transliteration": "^2.2.0",
     "ts-jest": "^26.5.5",
-    "typescript": "^4.6.4",
-    "vite": "^2.9.15",
-    "vite-plugin-dts": "1.4.1",
-    "vite-plugin-md": "^0.11.8",
+    "typescript": "^4.9.3",
+    "vite": "^3.2.4",
+    "vite-plugin-md": "^0.20.4",
     "vue": "^3.2.24",
-    "vue-jest": "^5.0.0-alpha.7"
+    "vue-jest": "^5.0.0-alpha.7",
+    "vue-tsc": "^1.0.9"
   },
   "eslintConfig": {
     "root": true,
@@ -143,10 +152,9 @@
       "no-debugger": "off"
     }
   },
-  "config": {
-    "commitizen": {
-      "path": "node_modules/cz-git"
-    }
+  "engines": {
+    "node": ">= 16.0.0",
+    "pnpm": ">= 7.0.0"
   },
   "lint-staged": {
     "*.md": "prettier --write",

package/dist/packages/_es/props.js

@@ -1,80 +0,0 @@
-/*!
-* @nutui/nutui v3.3.1 Fri Dec 16 2022 17:34:28 GMT+0800 (中国标准时间)
-* (c) 2022 @jdf2e.
-* Released under the MIT License.
-*/
-const popupProps = {
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  zIndex: {
-    type: [Number, String],
-    default: 2e3
-  },
-  duration: {
-    type: [Number, String],
-    default: 0.3
-  },
-  lockScroll: {
-    type: Boolean,
-    default: false
-  },
-  closeOnClickOverlay: {
-    type: Boolean,
-    default: true
-  },
-  position: {
-    type: String,
-    default: "center"
-  },
-  transition: {
-    type: String,
-    default: ""
-  },
-  style: {
-    type: Object,
-    default: {}
-  },
-  popClass: {
-    type: String,
-    default: ""
-  },
-  closeable: {
-    type: Boolean,
-    default: false
-  },
-  closeIconPosition: {
-    type: String,
-    default: "top-right"
-  },
-  closeIcon: {
-    type: String,
-    default: "close"
-  },
-  destroyOnClose: {
-    type: Boolean,
-    default: true
-  },
-  teleport: {
-    type: [String, Element],
-    default: "body"
-  },
-  overlay: {
-    type: Boolean,
-    default: true
-  },
-  round: {
-    type: Boolean,
-    default: false
-  },
-  teleportDisable: {
-    type: Boolean,
-    default: false
-  },
-  safeAreaInsetBottom: {
-    type: Boolean,
-    default: false
-  }
-};
-export { popupProps as p };

package/dist/packages/locale/lang/baseLang.js

@@ -1,8 +0,0 @@
-/*!
-* @nutui/nutui v3.3.1 Fri Dec 16 2022 17:34:43 GMT+0800 (中国标准时间)
-* (c) 2022 @jdf2e.
-* Released under the MIT License.
-*/
-class BaseLang {
-}
-export { BaseLang as B };

package/dist/style.es.js

@@ -1,2 +0,0 @@
-var _default = "";
-export { _default as default };

package/dist/styles/animation/icon.scss

@@ -1,245 +0,0 @@
-// 跳动
-@-webkit-keyframes nutJump {
-  to {
-    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
-  }
-}
-
-@keyframes nutJump {
-  to {
-    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
-  }
-}
-
-@-webkit-keyframes nutJumpOne {
-  50% {
-    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
-  }
-
-  100% {
-    transform: scale3d(1, 1, 1) translateY(0);
-  }
-}
-
-@keyframes nutJumpOne {
-  50% {
-    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
-  }
-
-  100% {
-    transform: scale3d(1, 1, 1) translateY(0);
-  }
-}
-
-// 闪烁
-@-webkit-keyframes nutBlink {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes nutBlink {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-// 呼吸
-@-webkit-keyframes nutBreathe {
-  from,
-  to {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.2);
-  }
-}
-
-@keyframes nutBreathe {
-  from,
-  to {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.2);
-  }
-}
-
-// 闪现
-@-webkit-keyframes nutFlash {
-  from,
-  50%,
-  to {
-    opacity: 1;
-  }
-
-  25%,
-  75% {
-    opacity: 0;
-  }
-}
-
-@keyframes nutFlash {
-  from,
-  50%,
-  to {
-    opacity: 1;
-  }
-
-  25%,
-  75% {
-    opacity: 0;
-  }
-}
-
-// 弹动
-@-webkit-keyframes nutBounce {
-  from,
-  20%,
-  53%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%,
-  43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
-    transform: translate3d(0, -30px, 0) scaleY(1.1);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
-    transform: translate3d(0, -15px, 0) scaleY(1.05);
-  }
-
-  80% {
-    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
-    transform: translate3d(0, 0, 0) scaleY(0.95);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
-    transform: translate3d(0, -4px, 0) scaleY(1.02);
-  }
-}
-
-@keyframes nutBounce {
-  from,
-  20%,
-  53%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%,
-  43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
-    transform: translate3d(0, -30px, 0) scaleY(1.1);
-  }
-
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
-    transform: translate3d(0, -15px, 0) scaleY(1.05);
-  }
-
-  80% {
-    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
-    transform: translate3d(0, 0, 0) scaleY(0.95);
-  }
-
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
-    transform: translate3d(0, -4px, 0) scaleY(1.02);
-  }
-}
-
-// 抖动
-@-webkit-keyframes nutShake {
-  0% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-
-  6.5% {
-    -webkit-transform: translateX(-6px) rotateY(-9deg);
-    transform: translateX(-6px) rotateY(-9deg);
-  }
-
-  18.5% {
-    -webkit-transform: translateX(5px) rotateY(7deg);
-    transform: translateX(5px) rotateY(7deg);
-  }
-
-  31.5% {
-    -webkit-transform: translateX(-3px) rotateY(-5deg);
-    transform: translateX(-3px) rotateY(-5deg);
-  }
-
-  43.5% {
-    -webkit-transform: translateX(2px) rotateY(3deg);
-    transform: translateX(2px) rotateY(3deg);
-  }
-
-  50% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-}
-
-@keyframes nutShake {
-  0% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-
-  6.5% {
-    -webkit-transform: translateX(-6px) rotateY(-9deg);
-    transform: translateX(-6px) rotateY(-9deg);
-  }
-
-  18.5% {
-    -webkit-transform: translateX(5px) rotateY(7deg);
-    transform: translateX(5px) rotateY(7deg);
-  }
-
-  31.5% {
-    -webkit-transform: translateX(-3px) rotateY(-5deg);
-    transform: translateX(-3px) rotateY(-5deg);
-  }
-
-  43.5% {
-    -webkit-transform: translateX(2px) rotateY(3deg);
-    transform: translateX(2px) rotateY(3deg);
-  }
-
-  50% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-}