From 7191314731138ea930c722b7a38e1a94377da9f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 15 Jan 2025 15:17:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E7=94=BB=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-module/animation-config/index.vue  |  13 +-
 .../custom-module/data-rendering/index.vue    |  13 +-
 .../model-custom-group-style.vue              |   2 +
 .../model-icon/model-icon-style.vue           |   2 +
 .../model-image/model-image-style.vue         |   2 +
 .../model-lines/model-lines-style.vue         |   2 +
 .../model-panel/model-panel-style.vue         |   2 +
 .../model-text/model-text-style.vue           |   2 +
 .../model-custom/components/index-default.ts  |  24 ++
 .../model-custom/components/index.vue         |  17 +-
 src/styles/animation.scss                     | 382 ++++++++++++++++--
 11 files changed, 431 insertions(+), 30 deletions(-)

diff --git a/src/components/common/custom-module/animation-config/index.vue b/src/components/common/custom-module/animation-config/index.vue
index fcd46fdf..28128791 100644
--- a/src/components/common/custom-module/animation-config/index.vue
+++ b/src/components/common/custom-module/animation-config/index.vue
@@ -16,12 +16,12 @@
 
 <script lang="ts" setup>
 // 动画类型
-const animation_type = defineModel('type', { type: String, default: 'default' });
+const animation_type = defineModel('type', { type: String, default: 'none' });
 // 动画次数
 const animation_number = defineModel('number', { type: String, default: 'infinite' });
 // 动画类型选项
 const animation_option = [
-    { name: '无', value: 'default' },
+    { name: '无', value: 'none' },
     { name: '中心放大', value: 'scale-up-center' },
     { name: '中心缩小', value: 'scale-out-center' },
     { name: '垂直放大', value: 'scale-up-ver-bottom' },
@@ -33,10 +33,19 @@ const animation_option = [
     { name: '文字铺开', value: 'tracking-in-expand' },
     { name: '左侧弹跳', value: 'bounce-in-left' },
     { name: '左侧滑动', value: 'slide-in-left' },
+    { name: '向上弹跳', value: 'bounce-top' },
+    { name: '向下弹跳', value: 'bounce-bottom' },
+    { name: '向左弹跳', value: 'bounce-left' },
+    { name: '向右弹跳', value: 'bounce-right' },
     { name: '中心滑动', value: 'slide-in-fwd-center' },
+    { name: '左旋转', value: 'swirl-in-left-fwd' },
+    { name: '模糊显示', value: 'text-focus-in' },
     { name: '心跳', value: 'heartbeat' },
     { name: '脉动', value: 'pulsate-bck' },
     { name: '翻转', value: 'flip-in-diag-2-tl' },
+    { name: '摇动', value: 'shake-bottom' },
+    { name: '震动', value: 'vibrate' },
+    { name: '果冻', value: 'jello-horizontal' }
 ];
 // 动画类型次数
 const animation_number_option = [
diff --git a/src/components/common/custom-module/data-rendering/index.vue b/src/components/common/custom-module/data-rendering/index.vue
index 46f69c0e..66b9516e 100644
--- a/src/components/common/custom-module/data-rendering/index.vue
+++ b/src/components/common/custom-module/data-rendering/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="w h re custom-other">
-        <div v-for="(item, index) in list" :key="item.id" class="main-content flex-row" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (customList.length - 1) - index}">
+        <div v-for="(item, index) in list" :key="item.id" :class="`main-content flex-row ${ animation_class(item.com_data) }`" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (customList.length - 1) - index}">
             <template v-if="item.key == 'text'">
                 <model-text :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :title-params="showData?.data_name || 'name'" :is-display-panel="true"></model-text>
             </template>
@@ -95,6 +95,17 @@ const percentage_count = (val: number) => {
 };
 
 const custom_height = computed(() => props.dataHeight * props.scale + 'px');
+
+const animation_class = computed(() => {
+    return (val: any) => {
+        const { type = 'none', number = 'infinite' } = val?.animation_style || {};
+        if (type != 'none') {
+            return type + (number == 'infinite' ? `-${number}` : '');
+        } else {
+            return '';
+        }
+    }
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue b/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
index c8b2c369..1f9a5a6e 100644
--- a/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
+++ b/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
@@ -15,6 +15,8 @@
             <div class="bg-f5 divider-line" />
             <condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
             <div class="bg-f5 divider-line" />
+            <animation-config v-model:type="form.animation_style.type" v-model:number="form.animation_style.number" @operation_end="operation_end"></animation-config>
+            <div class="bg-f5 divider-line" />
             <el-tabs v-model="tabs_name" class="content-tabs">
                 <el-tab-pane label="内容设置" name="content">
                     <custom-tabs-content :value="form" :options="options" @operation_end="operation_end"></custom-tabs-content>
diff --git a/src/components/common/custom-module/model-icon/model-icon-style.vue b/src/components/common/custom-module/model-icon/model-icon-style.vue
index 6d39da27..a62062ee 100644
--- a/src/components/common/custom-module/model-icon/model-icon-style.vue
+++ b/src/components/common/custom-module/model-icon/model-icon-style.vue
@@ -69,6 +69,8 @@
             <div class="bg-f5 divider-line" />
             <condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
             <div class="bg-f5 divider-line" />
+            <animation-config v-model:type="form.animation_style.type" v-model:number="form.animation_style.number" @operation_end="operation_end"></animation-config>
+            <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">边框设置</div>
                 <el-form-item label="边框显示">
diff --git a/src/components/common/custom-module/model-image/model-image-style.vue b/src/components/common/custom-module/model-image/model-image-style.vue
index 0012285e..85ba94a9 100644
--- a/src/components/common/custom-module/model-image/model-image-style.vue
+++ b/src/components/common/custom-module/model-image/model-image-style.vue
@@ -40,6 +40,8 @@
             <div class="bg-f5 divider-line" />
             <condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
             <div class="bg-f5 divider-line" />
+            <animation-config v-model:type="form.animation_style.type" v-model:number="form.animation_style.number" @operation_end="operation_end"></animation-config>
+            <div class="bg-f5 divider-line" />
             <card-container class="h">
                 <div class="mb-12">边框设置</div>
                 <el-form-item label="边框显示">
diff --git a/src/components/common/custom-module/model-lines/model-lines-style.vue b/src/components/common/custom-module/model-lines/model-lines-style.vue
index a8fbe777..657a4b65 100644
--- a/src/components/common/custom-module/model-lines/model-lines-style.vue
+++ b/src/components/common/custom-module/model-lines/model-lines-style.vue
@@ -39,6 +39,8 @@
             </card-container>
             <div class="bg-f5 divider-line" />
             <condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
+            <div class="bg-f5 divider-line" />
+            <animation-config v-model:type="form.animation_style.type" v-model:number="form.animation_style.number" @operation_end="operation_end"></animation-config>
         </el-form>
     </div>
 </template>
diff --git a/src/components/common/custom-module/model-panel/model-panel-style.vue b/src/components/common/custom-module/model-panel/model-panel-style.vue
index 29364ad4..22fc56a9 100644
--- a/src/components/common/custom-module/model-panel/model-panel-style.vue
+++ b/src/components/common/custom-module/model-panel/model-panel-style.vue
@@ -35,6 +35,8 @@
             <div class="bg-f5 divider-line" />
             <condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
             <div class="bg-f5 divider-line" />
+            <animation-config v-model:type="form.animation_style.type" v-model:number="form.animation_style.number" @operation_end="operation_end"></animation-config>
+            <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">边框设置</div>
                 <el-form-item label="边框显示">
diff --git a/src/components/common/custom-module/model-text/model-text-style.vue b/src/components/common/custom-module/model-text/model-text-style.vue
index 57fb624f..8f039f7d 100644
--- a/src/components/common/custom-module/model-text/model-text-style.vue
+++ b/src/components/common/custom-module/model-text/model-text-style.vue
@@ -102,6 +102,8 @@
             <div class="bg-f5 divider-line" />
             <condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
             <div class="bg-f5 divider-line" />
+            <animation-config v-model:type="form.animation_style.type" v-model:number="form.animation_style.number" @operation_end="operation_end"></animation-config>
+            <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">边框设置</div>
                 <el-form-item label="边框显示">
diff --git a/src/components/model-custom/components/index-default.ts b/src/components/model-custom/components/index-default.ts
index 7422e9d8..ef3c3307 100644
--- a/src/components/model-custom/components/index-default.ts
+++ b/src/components/model-custom/components/index-default.ts
@@ -55,6 +55,10 @@ const text_com_data = {
         field: '', // 字段id
         type: '', // 条件类型
         value: '', // 值
+    },
+    animation_style: {
+        type: 'none',
+        number: 'infinite',
     }
 }
 // 图片的默认值
@@ -99,6 +103,10 @@ const img_com_data = {
         field: '', // 字段id
         type: '', // 条件类型
         value: '', // 值
+    },
+    animation_style: {
+        type: 'none',
+        number: 'infinite',
     }
 }
 // 线条的默认值
@@ -116,6 +124,10 @@ const line_com_data = {
         field: '', // 字段id
         type: '', // 条件类型
         value: '', // 值
+    },
+    animation_style: {
+        type: 'none',
+        number: 'infinite',
     }
 }
 
@@ -168,6 +180,10 @@ const icon_com_data = {
         field: '', // 字段id
         type: '', // 条件类型
         value: '', // 值
+    },
+    animation_style: {
+        type: 'none',
+        number: 'infinite',
     }
 }
 
@@ -202,6 +218,10 @@ const panel_com_data = {
         field: '', // 字段id
         type: '', // 条件类型
         value: '', // 值
+    },
+    animation_style: {
+        type: 'none',
+        number: 'infinite',
     }
 }
 
@@ -227,6 +247,10 @@ const custom_group_com_data = {
     is_scroll_bar: false,   // 是否需要滚动条
     data_style: {
         ...defaultCustom.style
+    },
+    animation_style: {
+        type: 'none',
+        number: 'infinite',
     }
 }
 // 判断两个矩形是否有交集或者被包裹
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index dbddaa13..e0fed0c2 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -68,7 +68,7 @@
                         <div class="w h" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
                             <DraggableContainer v-if="draggable_container" style="z-index:0" :reference-line-visible="true" :disabled="false" reference-line-color="#ddd" @selectstart.prevent @contextmenu.prevent @dragstart.prevent>
                                 <!-- @mouseover="on_choose(index)" -->
-                                <Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="{'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }" :style="{ 'z-index': (diy_data.length - 1) - index }" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index, 'resizing')" @resize-end="resizingHandle($event, item.key, index, 'resizeEnd')">
+                                <Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="[`${ animation_class(item.com_data) } `, {'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }]" :style="{ 'z-index': (diy_data.length - 1) - index }" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index, 'resizing')" @resize-end="resizingHandle($event, item.key, index, 'resizeEnd')">
                                     <div :class="['main-content flex-row', { 'plug-in-border': item.show_tabs == '1' }]">
                                         <template v-if="item.key == 'text'">
                                             <model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId" :title-params="showData?.data_name || 'name'"></model-text>
@@ -191,6 +191,17 @@ const url_computer = (name: string) => {
     return new_url;
 };
 //#endregion
+// 动画class处理
+const animation_class = computed(() => {
+    return (val: any) => {
+        const { type = 'none', number = 'infinite' } = val?.animation_style || {};
+        if (type != 'none') {
+            return type + (number == 'infinite' ? `-${number}` : '');
+        } else {
+            return '';
+        }
+    }
+});
 // 获取历史记录存储的别名
 //#region 组件边线相关
 const is_show_component_line = ref(false);
@@ -457,6 +468,10 @@ watch(() => center_height.value, () => {
                     ...item.com_data?.data_source_link_field ?? { id: '', option: {} },
                     id: !isEmpty(item.com_data?.data_source_link_field?.id || '')? item.com_data.data_source_link_field.id : '',
                 },
+                animation_style: {
+                    type: item.com_data?.animation_style?.type || 'none',
+                    number: item.com_data?.animation_style?.number || 'infinite',
+                },
             },
         }));
         // 容器高度变化时，组件不绑定右侧数据
diff --git a/src/styles/animation.scss b/src/styles/animation.scss
index cb116616..bd76cc0a 100644
--- a/src/styles/animation.scss
+++ b/src/styles/animation.scss
@@ -1,24 +1,22 @@
 // 放大缩小
 .scale-up-center {
-	-webkit-animation: slide-out-bck-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
-	        animation: slide-out-bck-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+	-webkit-animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+	        animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 }
 
-.slide-out-bck-center-infinite {
-	-webkit-animation: slide-out-bck-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
-	        animation: slide-out-bck-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
+.scale-up-center-infinite {
+	-webkit-animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
+	        animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
 }
 
-@keyframes slide-out-bck-center {
+@keyframes scale-up-center {
     0% {
-      -webkit-transform: translateZ(0);
-              transform: translateZ(0);
-      opacity: 1;
+      -webkit-transform: scale(0.5);
+              transform: scale(0.5);
     }
     100% {
-      -webkit-transform: translateZ(-1100px);
-              transform: translateZ(-1100px);
-      opacity: 0;
+      -webkit-transform: scale(1);
+              transform: scale(1);
     }
   }
 // 中心缩小
@@ -53,16 +51,42 @@
 	-webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
 	        animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
 }
+@keyframes scale-up-ver-bottom {
+    0% {
+        -webkit-transform: scaleY(0.4);
+                transform: scaleY(0.4);
+        -webkit-transform-origin: 50%;
+                transform-origin: 50%;
+    }
+    80% {
+        -webkit-transform: scaleY(1);
+                transform: scaleY(1);
+        -webkit-transform-origin: 50%;
+                transform-origin: 50%;
+    }
+    85% {
+        -webkit-transform: rotate(-8deg);
+                transform: rotate(-8deg);
+    }
+    95% {
+        -webkit-transform: rotate(8deg);
+                transform: rotate(8deg);
+    }
+    100% {
+        -webkit-transform: rotate(0);
+                transform: rotate(0);
+    }
+}
 // 交替垂直放大
 .scale-up-ver-bottom-alternate {
-    -webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
-	        animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
+    -webkit-animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
+	        animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
 }
 .scale-up-ver-bottom-alternate-infinite {
-    -webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
-	        animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
+    -webkit-animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
+	        animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
 }
-@keyframes scale-up-ver-bottom {
+@keyframes scale-up-ver-bottom-alternate {
     0% {
         -webkit-transform: scaleY(0.4);
                 transform: scaleY(0.4);
@@ -244,14 +268,160 @@
     }
 }
 
+// 向上弹跳
+.bounce-top {
+	-webkit-animation: bounce-top 1.5s both;
+	        animation: bounce-top 1.5s both;
+}
+.bounce-top-infinite {
+	-webkit-animation: bounce-top 1.5s infinite both;
+	        animation: bounce-top 1.5s infinite both;
+}
+
+@keyframes bounce-top {
+    0%, 30%, 60%, 100% {
+      -webkit-transform: translateY(0);
+              transform: translateY(0);
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+    }
+    15% {
+      -webkit-transform: translateY(-40px);
+              transform: translateY(-40px);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+    45% {
+        -webkit-transform: translateY(-20px);
+                transform: translateY(-20px);
+        -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+    75% {
+      -webkit-transform: translateY(-8px);
+              transform: translateY(-8px);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+}
+
+// 向下弹跳
+.bounce-bottom {
+	-webkit-animation: bounce-bottom 1.5s both;
+	        animation: bounce-bottom 1.5s both;
+}
+.bounce-bottom-infinite {
+	-webkit-animation: bounce-bottom 1.5s infinite both;
+	        animation: bounce-bottom 1.5s infinite both;
+}
+
+@keyframes bounce-bottom {
+    0%, 30%, 60%, 100% {
+        -webkit-transform: translateY(0);
+                transform: translateY(0);
+        -webkit-animation-timing-function: ease-out;
+                animation-timing-function: ease-out;
+    }
+    15% {
+        -webkit-transform: translateY(40px);
+                transform: translateY(40px);
+        -webkit-animation-timing-function: ease-in;
+                animation-timing-function: ease-in;
+    }
+    45% {
+        -webkit-transform: translateY(20px);
+                transform: translateY(20px);
+        -webkit-animation-timing-function: ease-in;
+                animation-timing-function: ease-in;
+    }
+    75% {
+        -webkit-transform: translateY(8px);
+                transform: translateY(8px);
+        -webkit-animation-timing-function: ease-in;
+                animation-timing-function: ease-in;
+    }
+}
+
+// 向左弹跳
+.bounce-left {
+	-webkit-animation: bounce-left 1.5s both;
+	        animation: bounce-left 1.5s both;
+}
+.bounce-left-infinite {
+	-webkit-animation: bounce-left 1.5s infinite both;
+	        animation: bounce-left 1.5s infinite both;
+}
+
+@keyframes bounce-left {
+    0%, 30%, 60%, 100% {
+        -webkit-transform: translateX(0);
+                transform: translateX(0);
+        -webkit-animation-timing-function: ease-out;
+                animation-timing-function: ease-out;
+    }
+    15% {
+        -webkit-transform: translateX(-40px);
+                transform: translateX(-40px);
+        -webkit-animation-timing-function: ease-in;
+                animation-timing-function: ease-in;
+    }
+    45% {
+        -webkit-transform: translateX(-20px);
+                transform: translateX(-20px);
+        -webkit-animation-timing-function: ease-in;
+                animation-timing-function: ease-in;
+    }
+    75% {
+        -webkit-transform: translateX(-8px);
+                transform: translateX(-8px);
+        -webkit-animation-timing-function: ease-in;
+                animation-timing-function: ease-in;
+    }
+}
+// 向右弹跳
+.bounce-right {
+	-webkit-animation: bounce-right 1.5s both;
+	        animation: bounce-right 1.5s both;
+}
+.bounce-right-infinite {
+	-webkit-animation: bounce-right 1.5s infinite both;
+	        animation: bounce-right 1.5s infinite both;
+}
+
+@keyframes bounce-right {
+    0%, 30%, 60%, 100% {
+        -webkit-transform: translateX(0);
+                transform: translateX(0);
+        -webkit-animation-timing-function: ease-out;
+                animation-timing-function: ease-out;
+    }
+    15% {
+        -webkit-transform: translateX(40px);
+                transform: translateX(40px);
+        -webkit-animation-timing-function: ease-in;
+                animation-timing-function: ease-in;
+    }
+    45% {
+        -webkit-transform: translateX(20px);
+                transform: translateX(20px);
+        -webkit-animation-timing-function: ease-in;
+                animation-timing-function: ease-in;
+    }
+    75% {
+        -webkit-transform: translateX(8px);
+                transform: translateX(8px);
+        -webkit-animation-timing-function: ease-in;
+                animation-timing-function: ease-in;
+    }
+}
 // 左侧弹跳
 .bounce-in-left {
-	-webkit-animation: bounce-in-left 1.1s both;
-	        animation: bounce-in-left 1.1s both;
+	-webkit-animation: bounce-in-left 2s both;
+	        animation: bounce-in-left 2s both;
 }
 .bounce-in-left-infinite {
-	-webkit-animation: bounce-in-left 1.1s infinite both;
-	        animation: bounce-in-left 1.1s infinite both;
+	-webkit-animation: bounce-in-left 2s infinite both;
+	        animation: bounce-in-left 2s infinite both;
 }
 
 @keyframes bounce-in-left {
@@ -328,17 +498,17 @@
               transform: rotate3d(1, 1, 0, 0deg);
       opacity: 1;
     }
-  }
+}
 
 // 从左滑动
 .slide-in-left {
-	-webkit-animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-	        animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	-webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	        animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 }
 
 .slide-in-left-infinite {
-	-webkit-animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
-	        animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
+	-webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
+	        animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
 }
 
 @keyframes slide-in-left {
@@ -377,4 +547,164 @@
       opacity: 1;
     }
   }
+// 左前轮旋转
+.swirl-in-left-fwd {
+	-webkit-animation: swirl-in-left-fwd 2s ease-out both;
+	        animation: swirl-in-left-fwd 2s ease-out both;
+}
+.swirl-in-left-fwd-infinite {
+	-webkit-animation: swirl-in-left-fwd 2s ease-out infinite both;
+	        animation: swirl-in-left-fwd 2s ease-out infinite both;
+}
+@keyframes swirl-in-left-fwd {
+    0% {
+      -webkit-transform: rotate(-540deg) scale(0);
+              transform: rotate(-540deg) scale(0);
+      -webkit-transform-origin: 0 50%;
+              transform-origin: 0 50%;
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: rotate(0) scale(1);
+              transform: rotate(0) scale(1);
+      -webkit-transform-origin: 0 50%;
+              transform-origin: 0 50%;
+      opacity: 1;
+    }
+}
+// 摇动
+.shake-bottom {
+	-webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
+	        animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
+}
+.shake-bottom-infinite {
+	-webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
+	        animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
+}
+@keyframes shake-bottom {
+    0% {
+        -webkit-transform: scale(1) rotate(0deg);
+                transform: scale(1) rotate(0deg);
+        -webkit-transform-origin: 50%;
+                transform-origin: 50%;
+    }
+    80% {
+        -webkit-transform: scale(1.2);
+                transform: scale(1.2);
+        -webkit-transform-origin: 50%;
+                transform-origin: 50%;
+    }
+    85% {
+      -webkit-transform: rotate(-16deg);
+              transform: rotate(-16deg);
+    }
+    95% {
+      -webkit-transform: rotate(16deg);
+              transform: rotate(16deg);
+    }
+    100% {
+        -webkit-transform: scale(1);
+                transform: scale(1);
+        -webkit-transform-origin: 50%;
+                transform-origin: 50%;
+    }
+  }
+// 震动
+.vibrate {
+	-webkit-animation: vibrate 0.3s linear both;
+	        animation: vibrate 0.3s linear both;
+}
+.vibrate-infinite {
+	-webkit-animation: vibrate 0.3s linear infinite both;
+	        animation: vibrate 0.3s linear infinite both;
+}
+
+@keyframes vibrate {
+    0% {
+      -webkit-transform: translate(0);
+              transform: translate(0);
+    }
+    20% {
+      -webkit-transform: translate(2px, -2px);
+              transform: translate(2px, -2px);
+    }
+    40% {
+      -webkit-transform: translate(2px, 2px);
+              transform: translate(2px, 2px);
+    }
+    60% {
+      -webkit-transform: translate(-2px, 2px);
+              transform: translate(-2px, 2px);
+    }
+    80% {
+      -webkit-transform: translate(-2px, -2px);
+              transform: translate(-2px, -2px);
+    }
+    100% {
+      -webkit-transform: translate(0);
+              transform: translate(0);
+    }
+}
+// 模糊显示
+.text-focus-in {
+	-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+	        animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+}
+.text-focus-in-infinite {
+	-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
+	        animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
+}
+
+@keyframes text-focus-in {
+    0% {
+      -webkit-filter: blur(12px);
+              filter: blur(12px);
+      opacity: 0;
+    }
+    100% {
+      -webkit-filter: blur(0px);
+              filter: blur(0px);
+      opacity: 1;
+    }
+}
+  
+// 果冻
+.jello-horizontal {
+	-webkit-animation: jello-horizontal 0.9s both;
+	        animation: jello-horizontal 0.9s both;
+}
+.jello-horizontal-infinite {
+	-webkit-animation: jello-horizontal 0.9s infinite both;
+	        animation: jello-horizontal 0.9s infinite both;
+}
+@keyframes jello-horizontal {
+    0% {
+      -webkit-transform: scale3d(1, 1, 1);
+              transform: scale3d(1, 1, 1);
+    }
+    30% {
+      -webkit-transform: scale3d(1.25, 0.75, 1);
+              transform: scale3d(1.25, 0.75, 1);
+    }
+    40% {
+      -webkit-transform: scale3d(0.75, 1.25, 1);
+              transform: scale3d(0.75, 1.25, 1);
+    }
+    50% {
+      -webkit-transform: scale3d(1.15, 0.85, 1);
+              transform: scale3d(1.15, 0.85, 1);
+    }
+    65% {
+      -webkit-transform: scale3d(0.95, 1.05, 1);
+              transform: scale3d(0.95, 1.05, 1);
+    }
+    75% {
+      -webkit-transform: scale3d(1.05, 0.95, 1);
+              transform: scale3d(1.05, 0.95, 1);
+    }
+    100% {
+      -webkit-transform: scale3d(1, 1, 1);
+              transform: scale3d(1, 1, 1);
+    }
+  }
   
\ No newline at end of file