From bcd1aa1281062f8542746a90b3faf6ca99291c28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 16 Jan 2025 09:34:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=A8=E7=94=BB=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                                       |   1 +
 common/css/animation.css                      | 758 ++++++++++++++++++
 .../modules/custom/data-group-rendering.vue   |  12 +-
 .../diy/modules/custom/data-rendering.vue     |  12 +-
 4 files changed, 781 insertions(+), 2 deletions(-)
 create mode 100644 common/css/animation.css

diff --git a/App.vue b/App.vue
index bcf98632..d9641dcc 100644
--- a/App.vue
+++ b/App.vue
@@ -3128,4 +3128,5 @@
     @import './common/css/plugins.css';
     @import './common/css/lib.css';
     @import './common/css/theme.css';
+    @import './common/css/animation.css';
 </style>
\ No newline at end of file
diff --git a/common/css/animation.css b/common/css/animation.css
new file mode 100644
index 00000000..9c377fa8
--- /dev/null
+++ b/common/css/animation.css
@@ -0,0 +1,758 @@
+/*
+* 放大缩小
+*/
+.scale-up-center {
+	-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;
+}
+
+.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 scale-up-center {
+    0% {
+      -webkit-transform: scale(0.5);
+              transform: scale(0.5);
+    }
+    100% {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+    }
+  }
+/*
+* 中心缩小
+*/
+.scale-out-center {
+	-webkit-animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+	        animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+}
+.scale-out-center-infinite {
+	-webkit-animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
+	        animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
+}
+
+@keyframes scale-out-center {
+    0% {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      -webkit-transform: scale(0);
+              transform: scale(0);
+      opacity: 1;
+    }
+}
+/*
+* 垂直放大
+*/
+.scale-up-ver-bottom {
+	-webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+	        animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+}
+
+.scale-up-ver-bottom-infinite {
+	-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-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-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-alternate {
+    0% {
+        -webkit-transform: scaleY(0.4);
+                transform: scaleY(0.4);
+        -webkit-transform-origin: 0% 100%;
+                transform-origin: 0% 100%;
+    }
+    100% {
+        -webkit-transform: scaleY(1);
+                transform: scaleY(1);
+        -webkit-transform-origin: 0% 100%;
+                transform-origin: 0% 100%;
+    }
+}
+/*
+* 中间区域放大
+*/
+.scale-up-ver-center {
+	-webkit-animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+	        animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+}
+.scale-up-ver-center-infinite {
+	-webkit-animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
+	        animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
+}
+
+@keyframes scale-up-ver-center {
+    0% {
+      -webkit-transform: scaleY(0.4);
+              transform: scaleY(0.4);
+    }
+    100% {
+      -webkit-transform: scaleY(1);
+              transform: scaleY(1);
+    }
+}
+
+/*
+* 淡出
+.
+*/fade-out-fwd {
+	-webkit-animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	        animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+.fade-out-fwd-infinite {
+	-webkit-animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
+	        animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
+}
+@keyframes fade-out-fwd {
+    0% {
+      -webkit-transform: translateZ(0);
+              transform: translateZ(0);
+      opacity: 1;
+    }
+    100% {
+      -webkit-transform: translateZ(80px);
+              transform: translateZ(80px);
+      opacity: 0;
+    }
+}
+/*
+* 淡入
+*/
+.fade-in-bck {
+	-webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+	        animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+}
+.fade-in-bck-infinite {
+	-webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
+	        animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
+}
+/*
+* 淡入淡出
+*/
+.fade-in-bck-alternate {
+    -webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
+	        animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
+}
+.fade-in-bck-alternate-infinite {
+    -webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
+	        animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
+}
+@keyframes fade-in-bck {
+    0% {
+      -webkit-transform: translateZ(80px);
+              transform: translateZ(80px);
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: translateZ(0);
+              transform: translateZ(0);
+      opacity: 1;
+    }
+}
+/*
+* 文字铺开
+*/
+.tracking-in-expand {
+	-webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
+	        animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
+}
+
+.tracking-in-expand-infinite {
+	-webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite both;
+	        animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite both;
+}
+
+@keyframes tracking-in-expand {
+    0% {
+      letter-spacing: -0.5em;
+      opacity: 0;
+    }
+    40% {
+      opacity: 0.6;
+    }
+    100% {
+      opacity: 1;
+    }
+}
+
+/*
+* 心跳
+*/
+.heartbeat {
+	-webkit-animation: heartbeat 1s ease-in-out both;
+	        animation: heartbeat 1s ease-in-out both;
+}
+
+.heartbeat-infinite {
+	-webkit-animation: heartbeat 1s ease-in-out infinite both;
+	        animation: heartbeat 1s ease-in-out infinite both;
+}
+
+@keyframes heartbeat {
+    from {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+      -webkit-transform-origin: center center;
+              transform-origin: center center;
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+    }
+    10% {
+      -webkit-transform: scale(0.91);
+              transform: scale(0.91);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+    17% {
+      -webkit-transform: scale(0.98);
+              transform: scale(0.98);
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+    }
+    33% {
+      -webkit-transform: scale(0.87);
+              transform: scale(0.87);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+    45% {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+    }
+}
+
+/*
+* 脉动
+*/
+.pulsate-bck {
+	-webkit-animation: pulsate-bck 1s ease-in-out both;
+	        animation: pulsate-bck 1s ease-in-out both;
+}
+
+.pulsate-bck-infinite {
+	-webkit-animation: pulsate-bck 1s ease-in-out infinite both;
+	        animation: pulsate-bck 1s ease-in-out infinite both;
+}
+
+@keyframes pulsate-bck {
+    0% {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+    }
+    50% {
+      -webkit-transform: scale(0.9);
+              transform: scale(0.9);
+    }
+    100% {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+    }
+}
+
+/*
+* 向上弹跳
+*/
+.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 2s both;
+	        animation: bounce-in-left 2s both;
+}
+.bounce-in-left-infinite {
+	-webkit-animation: bounce-in-left 2s infinite both;
+	        animation: bounce-in-left 2s infinite both;
+}
+
+@keyframes bounce-in-left {
+    0% {
+      -webkit-transform: translateX(-500px);
+              transform: translateX(-500px);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+      opacity: 0;
+    }
+    38% {
+      -webkit-transform: translateX(0);
+              transform: translateX(0);
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+      opacity: 1;
+    }
+    55% {
+      -webkit-transform: translateX(-68px);
+              transform: translateX(-68px);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+    72% {
+      -webkit-transform: translateX(0);
+              transform: translateX(0);
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+    }
+    81% {
+      -webkit-transform: translateX(-28px);
+              transform: translateX(-28px);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+    90% {
+      -webkit-transform: translateX(0);
+              transform: translateX(0);
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+    }
+    95% {
+      -webkit-transform: translateX(-8px);
+              transform: translateX(-8px);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+    100% {
+      -webkit-transform: translateX(0);
+              transform: translateX(0);
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+    }
+}
+
+/*
+* 翻转
+*/
+.flip-in-diag-2-tl {
+	-webkit-animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	        animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+.flip-in-diag-2-tl-infinite {
+	-webkit-animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
+	        animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
+}
+
+@keyframes flip-in-diag-2-tl {
+    0% {
+      -webkit-transform: rotate3d(-1, 1, 0, 80deg);
+              transform: rotate3d(-1, 1, 0, 80deg);
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: rotate3d(1, 1, 0, 0deg);
+              transform: rotate3d(1, 1, 0, 0deg);
+      opacity: 1;
+    }
+}
+
+/*
+* 从左滑动
+*/
+.slide-in-left {
+	-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 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 {
+    0% {
+      -webkit-transform: translateX(-500px);
+              transform: translateX(-500px);
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: translateX(0);
+              transform: translateX(0);
+      opacity: 1;
+    }
+}
+
+/*
+* 在fwd
+*/中心滑动
+.slide-in-fwd-center {
+	-webkit-animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	        animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.slide-in-fwd-center-infinite {
+	-webkit-animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
+	        animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
+}
+
+@keyframes slide-in-fwd-center {
+    0% {
+      -webkit-transform: translateZ(-1400px);
+              transform: translateZ(-1400px);
+      opacity: 0;
+    }
+    100% {
+      -webkit-transform: translateZ(0);
+              transform: translateZ(0);
+      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
diff --git a/components/diy/modules/custom/data-group-rendering.vue b/components/diy/modules/custom/data-group-rendering.vue
index 9fc6b951..e7556934 100644
--- a/components/diy/modules/custom/data-group-rendering.vue
+++ b/components/diy/modules/custom/data-group-rendering.vue
@@ -1,6 +1,6 @@
 <template>
     <view class="wh-auto pr" :style="'height:' + propDataHeight * propScale + 'px;'">
-        <view v-for="(item, index) in propCustomList" :key="item.id" class="main-content" :style="{ left: get_percentage_count(item.location.x), top: get_percentage_count(item.location.y), width: get_percentage_count(item.com_data.com_width), height: get_percentage_count(item.com_data.com_height), 'z-index': propCustomList.length - 1 > 0 ? (propCustomList.length - 1) - index : 0 }">
+        <view v-for="(item, index) in propCustomList" :key="item.id" :class="'main-content ' + get_animation_class(item.com_data)" :style="{ left: get_percentage_count(item.location.x), top: get_percentage_count(item.location.y), width: get_percentage_count(item.com_data.com_width), height: get_percentage_count(item.com_data.com_height), 'z-index': propCustomList.length - 1 > 0 ? (propCustomList.length - 1) - index : 0 }">
             <template v-if="item.key == 'text'">
                 <model-text :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :propIsCustomGroup="propIsCustomGroup" :propCustomGroupFieldId="propCustomGroupFieldId" :propTitleParams="propShowData.data_name" @url_event="url_event"></model-text>
             </template>
@@ -103,6 +103,16 @@ export default {
                 return num * this.propScale + 'px';
             };
         },
+        get_animation_class() {
+            return (data) => {
+                const { type = 'none', number = 'infinite' } = data?.animation_style || {};
+                if (type != 'none') {
+                    return type + (number == 'infinite' ? `-${number}` : '');
+                } else {
+                    return '';
+                }
+            };
+        }
     },
     methods: {
         url_event(e) {
diff --git a/components/diy/modules/custom/data-rendering.vue b/components/diy/modules/custom/data-rendering.vue
index 784229f8..088bcf48 100644
--- a/components/diy/modules/custom/data-rendering.vue
+++ b/components/diy/modules/custom/data-rendering.vue
@@ -1,6 +1,6 @@
 <template>
     <view class="wh-auto pr" :style="'height:' + propDataHeight * propScale + 'px;'">
-        <view v-for="(item, index) in propCustomList" :key="item.id" class="main-content" :style="{ left: get_percentage_count(item.location.x), top: get_percentage_count(item.location.y), width: get_percentage_count(item.com_data.com_width), height: get_percentage_count(item.com_data.com_height), 'z-index': propCustomList.length - 1 > 0 ? (propCustomList.length - 1) - index : 0 }">
+        <view v-for="(item, index) in propCustomList" :key="item.id" :class="'main-content ' + get_animation_class(item.com_data)" :style="{ left: get_percentage_count(item.location.x), top: get_percentage_count(item.location.y), width: get_percentage_count(item.com_data.com_width), height: get_percentage_count(item.com_data.com_height), 'z-index': propCustomList.length - 1 > 0 ? (propCustomList.length - 1) - index : 0 }">
             <template v-if="item.key == 'text'">
                 <model-text :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :propIsCustomGroup="propIsCustomGroup" :propCustomGroupFieldId="propCustomGroupFieldId" :propTitleParams="propShowData.data_name" @url_event="url_event"></model-text>
             </template>
@@ -114,6 +114,16 @@ export default {
                 return num * this.propScale + 'px';
             };
         },
+        get_animation_class() {
+            return (data) => {
+                const { type = 'none', number = 'infinite' } = data?.animation_style || {};
+                if (type != 'none') {
+                    return type + (number == 'infinite' ? `-${number}` : '');
+                } else {
+                    return '';
+                }
+            };
+        }
     },
     methods: {
         url_event(e) {