diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx
index cad6e8bf0..77ab6fa61 100644
--- a/client/packages/lowcoder-design/src/components/Section.tsx
+++ b/client/packages/lowcoder-design/src/components/Section.tsx
@@ -146,6 +146,7 @@ export const sectionNames = {
   layout: trans("prop.layout"),
   style: trans("prop.style"),
   labelStyle:trans("prop.labelStyle"),
+  animationStyle:trans("prop.animationStyle"),
   data: trans("prop.data"),
   meetings: trans("prop.meetings"), // added by Falk Wolsky
   field: trans("prop.field"),
diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
index b15621be1..4ca204e55 100644
--- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
+++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
@@ -23,6 +23,7 @@ export const en = {
     advanced: "Advanced",
     validation: "Validation",
     layout: "Layout",
+    animationStyle:"Animation Style",
     labelStyle: "Label Style",
     style: "Style",
     meetings: "Meeting Settings",
diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts
index bac14e692..fbf2eb143 100644
--- a/client/packages/lowcoder-design/src/icons/index.ts
+++ b/client/packages/lowcoder-design/src/icons/index.ts
@@ -161,6 +161,10 @@ export { ReactComponent as ResetIcon } from "./icon-style-reset.svg";
 export { ReactComponent as EditIcon } from "./icon-edit.svg";
 export { ReactComponent as EditableIcon } from "./icon-editable.svg";
 export { ReactComponent as LeftStateIcon } from "./remix/node-tree.svg";
+export {ReactComponent as StarSmileIcon} from "./remix/star-smile-line.svg";
+export {ReactComponent as Timer2Icon} from "./remix/timer-2-line.svg";
+export {ReactComponent as TimerFlashIcon} from "./remix/timer-flash-line.svg";
+export {ReactComponent as RefreshLineIcon} from "./remix/refresh-line.svg";
 export { ReactComponent as LeftSettingIcon } from "./remix/tools-fill.svg";
 export { ReactComponent as LeftLayersIcon } from "./remix/stack-line.svg";
 export { ReactComponent as LeftHelpIcon } from "./icon-left-help.svg";
diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
index 62560576b..269e4beef 100644
--- a/client/packages/lowcoder/package.json
+++ b/client/packages/lowcoder/package.json
@@ -36,6 +36,7 @@
     "@types/react-signature-canvas": "^1.0.2",
     "@types/react-test-renderer": "^18.0.0",
     "@types/react-virtualized": "^9.21.21",
+    "animate.css": "^4.1.1",
     "antd": "5.13.2",
     "axios": "^1.6.2",
     "buffer": "^6.0.3",
diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
index 48a17cc2a..135794440 100644
--- a/client/packages/lowcoder/src/api/commonSettingApi.ts
+++ b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -44,10 +44,17 @@ export interface ThemeDetail {
   primarySurface: string; // comp bg-color
   borderRadius: string;
   chart?: string;
-  margin?: string;	
+  margin?: string;
   padding?: string;
   gridColumns?: string; //Added By Aqib Mirza
   textSize?: string;
+  animation?: string;
+  animationDelay?: string;
+  animationDuration?: string;
+  opacity?: string;
+  boxShadow?: string;
+  boxShadowColor?: string;
+  animationIterationCount?: string;
 }
 
 export function getThemeDetailName(key: keyof ThemeDetail) {
diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
index ae6fb9457..d639d2fc7 100644
--- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -3,6 +3,7 @@ import { Input, Section, sectionNames } from "lowcoder-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl";
 import {
+  AnimationStyle,
   InputFieldStyle,
   InputLikeStyle,
   InputLikeStyleType,
@@ -62,6 +63,7 @@ const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
     ${getStyle(props.$style)}
     input {
       padding: ${props.style?.padding};
+      rotate: ${props?.$style?.rotation};
     }
     .ant-select-single {
       width: 100% !important;
@@ -89,6 +91,7 @@ const childrenMap = {
   componentSize: dropdownControl(componentSize, "small"),
   valueInItems: booleanExposingStateControl("valueInItems"),
   inputFieldStyle: styleControl(InputLikeStyle),
+  animationStyle: styleControl(AnimationStyle),
 };
 
 const getValidate = (value: any): "" | "warning" | "error" | undefined => {
@@ -283,6 +286,7 @@ let AutoCompleteCompBase = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      animationStyle: props.animationStyle,
       ...validateState,
     });
   })
@@ -347,6 +351,9 @@ let AutoCompleteCompBase = (function () {
           <Section name={sectionNames.inputFieldStyle}>
             {children.inputFieldStyle.getPropertyView()}
           </Section>
+          <Section name={sectionNames.animationStyle}>
+            {children.animationStyle.getPropertyView()}
+          </Section>
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
index 274a29e13..f4e1d2933 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -3,7 +3,7 @@ import { ButtonCompWrapper, buttonRefMethods } from "comps/comps/buttonComp/butt
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
-import { LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
 import { withDefault } from "comps/generators";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
@@ -23,7 +23,11 @@ import { RefControl } from "comps/controls/refControl";
 import { EditorContext } from "comps/editorState";
 import React, { useContext } from "react";
 
-const Link = styled(Button) <{ $style: LinkStyleType }>`
+const Link = styled(Button)<{
+  $style: LinkStyleType;
+  $animationStyle: AnimationStyleType;
+}>`
+  ${(props) => props.$animationStyle}
   ${(props) => `
     color: ${props.$style.text};
     margin: ${props.$style.margin};
@@ -81,6 +85,7 @@ const LinkTmpComp = (function () {
     disabled: BoolCodeControl,
     loading: BoolCodeControl,
     style: migrateOldData(styleControl(LinkStyle), fixOldData),
+    animationStyle:styleControl(AnimationStyle),
     prefixIcon: IconControl,
     suffixIcon: IconControl,
     viewRef: RefControl<HTMLElement>,
@@ -91,6 +96,7 @@ const LinkTmpComp = (function () {
     return (
       <ButtonCompWrapper disabled={props.disabled}>
         <Link
+          $animationStyle={props.animationStyle}
           ref={props.viewRef}
           $style={props.style}
           loading={props.loading}
@@ -130,7 +136,10 @@ const LinkTmpComp = (function () {
           )}
 
           {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-            <><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
+            <>
+              <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+              <Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
+            </>
           )}
         </>
       );
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
index edfab9222..868e2ebae 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
@@ -15,7 +15,11 @@ import { Button100, ButtonCompWrapper, buttonRefMethods } from "./buttonCompCons
 import { IconControl } from "comps/controls/iconControl";
 import { AlignWithStretchControl, LeftRightControl } from "comps/controls/dropdownControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
-import { ToggleButtonStyle } from "comps/controls/styleControlConstants";
+import {
+  AnimationStyle,
+  AnimationStyleType,
+  ToggleButtonStyle,
+} from "comps/controls/styleControlConstants";
 import { styleControl } from "comps/controls/styleControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { RefControl } from "comps/controls/refControl";
@@ -29,7 +33,9 @@ const IconWrapper = styled.div`
 const ButtonCompWrapperStyled = styled(ButtonCompWrapper)<{
   $align: "left" | "center" | "right" | "stretch";
   $showBorder: boolean;
+  $animationStyle: AnimationStyleType;
 }>`
+  ${(props) => props.$animationStyle}
   width: 100%;
   display: flex;
   justify-content: ${(props) => props.$align};
@@ -55,7 +61,8 @@ const ToggleTmpComp = (function () {
     iconPosition: LeftRightControl,
     alignment: AlignWithStretchControl,
     style: styleControl(ToggleButtonStyle),
-    showBorder: withDefault(BoolControl, true), 
+    animationStyle: styleControl(AnimationStyle),
+    showBorder: withDefault(BoolControl, true),
     viewRef: RefControl<HTMLElement>,
   };
   return new UICompBuilder(childrenMap, (props) => {
@@ -67,6 +74,7 @@ const ToggleTmpComp = (function () {
         disabled={props.disabled}
         $align={props.alignment}
         $showBorder={props.showBorder}
+        $animationStyle={props.animationStyle}
       >
         <Button100
           ref={props.viewRef}
@@ -122,13 +130,21 @@ const ToggleTmpComp = (function () {
           </>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-          <><Section name={sectionNames.style}>
-            {children.showBorder.propertyView({ label: trans("toggleButton.showBorder") })}
-            {children.style.getPropertyView()}
-          </Section></>
-        )}
-
+        {(useContext(EditorContext).editorModeStatus === "layout" ||
+          useContext(EditorContext).editorModeStatus === "both") && (
+          <>
+            <Section name={sectionNames.style}>
+              {children.showBorder.propertyView({
+                label: trans("toggleButton.showBorder"),
+              })}
+              {children.style.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.animationStyle}>
+              {children.animationStyle.getPropertyView()}
+            </Section>
+          </>
+          )}
+        
       </>
     ))
     .setExposeMethodConfigs(buttonRefMethods)
diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
index 74857007c..0ec885664 100644
--- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
@@ -31,6 +31,7 @@ import { EditorContext } from "comps/editorState";
 
 // Introducing styles
 import {
+  AnimationStyle,
   CommentStyle,
   heightCalculator,
   widthCalculator,
@@ -100,6 +101,7 @@ const childrenMap = {
   }),
   onEvent: eventHandlerControl(EventOptions),
   style: styleControl(CommentStyle),
+  animationStyle: styleControl(AnimationStyle),
   commentList: jsonValueExposingStateControl("commentList", []),
   deletedItem: jsonValueExposingStateControl("deletedItem", []),
   submitedItem: jsonValueExposingStateControl("submitedItem", []),
@@ -125,6 +127,7 @@ const CommentCompBase = (
     userInfo,
     placeholder,
     deleteAble,
+    animationStyle,
   } = props;
   type PrefixType = "@" | keyof typeof mentionList;
   // Used to save the consolidated list of mentions
@@ -233,7 +236,11 @@ const CommentCompBase = (
         width: widthCalculator(style.margin ?? "3px"),
         height: heightCalculator(style.margin ?? "3px"),
         background: style.background,
-        borderRadius: style.radius,
+      borderRadius: style.radius,
+      animation: animationStyle.animation,
+      animationDelay: animationStyle.animationDelay,
+      animationDuration: animationStyle.animationDuration,
+        animationIterationCount:animationStyle.animationIterationCount
       }}>
       <div
         style={{
@@ -413,8 +420,12 @@ let CommentBasicComp = (function () {
             {children.placeholder.propertyView({
               label: trans("comment.placeholderDec"),
             })}
-          </Section><Section name={sectionNames.style}>
+          </Section>
+            <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.animationStyle}>
+              {children.animationStyle.getPropertyView()}
             </Section></>
         )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
index d8784192c..66991fb83 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -13,7 +13,7 @@ import { useContext, useEffect, useRef, useState } from "react";
 import { EditorContext } from "comps/editorState";
 import { Card } from "antd";
 import styled from "styled-components";
-import { CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
 import { MultiCompBuilder, withDefault } from "comps/generators";
 import { IconControl } from "comps/controls/iconControl";
 import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refreshEvent } from "comps/controls/eventHandlerControl";
@@ -22,7 +22,14 @@ import { dropdownControl } from "comps/controls/dropdownControl";
 import { styleControl } from "comps/controls/styleControl";
 const { Meta } = Card;
 
-const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boolean, $cardType: string, $headerStyle:CardHeaderStyleType, $bodyStyle:CardHeaderStyleType }>`
+const Warpper = styled.div<{
+  $style: CardStyleType | undefined;
+  $showMate: boolean;
+  $cardType: string;
+  $headerStyle: CardHeaderStyleType;
+  $bodyStyle: CardHeaderStyleType;
+  $animationStyle:AnimationStyleType;
+}>`
   height: 100%;
   width: 100%;
   .ant-card-small >.ant-card-head {
@@ -70,6 +77,7 @@ const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boole
     border-style: ${props => props.$style?.borderStyle};
     border-radius: ${props => props.$style?.radius};
     border-width: ${props => props.$style?.borderWidth};
+    ${props=>props.$animationStyle}
   }
   .ant-card-body {
     display: ${props => props.$showMate ? '' : 'none'};
@@ -173,6 +181,7 @@ export const ContainerBaseComp = (function () {
     style: styleControl(CardStyle),
     headerStyle: styleControl(CardHeaderStyle),
     bodyStyle: styleControl(CardHeaderStyle),
+    animationStyle: styleControl(AnimationStyle),
   };
 
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
@@ -202,6 +211,7 @@ export const ContainerBaseComp = (function () {
         <Warpper
           ref={conRef}
           $style={props.style}
+          $animationStyle={props.animationStyle}
           $headerStyle={props.headerStyle}
           $bodyStyle={props.bodyStyle}
           $showMate={props.showMeta || props.cardType == 'custom'}
@@ -321,6 +331,9 @@ export const ContainerBaseComp = (function () {
               <Section name={sectionNames.bodyStyle}>
                 {children.bodyStyle.getPropertyView()}
               </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
index d088a51c0..9005d7de2 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
@@ -16,10 +16,12 @@ import { BoolCodeControl } from "comps/controls/codeControl";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
 import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
 
 export const ContainerBaseComp = (function () {
   const childrenMap = {
     disabled: BoolCodeControl,
+    animationStyle: styleControl(AnimationStyle),
   };
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
     return (
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
index 489398a94..5164cd7dd 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
@@ -18,11 +18,12 @@ import {
   ContainerCompBuilder,
 } from "../pageLayoutComp/pageLayoutCompBuilder";
 import { PageLayout } from "../pageLayoutComp/pageLayout";
-
+import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
 
 export const ContainerBaseComp = (function () {
-  const childrenMap = { 
-    disabled: BoolCodeControl
+  const childrenMap = {
+    disabled: BoolCodeControl,
+    animationStyle: styleControl(AnimationStyle),
   };
 
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
@@ -52,7 +53,10 @@ export const ContainerBaseComp = (function () {
             </Section>
             <Section name={sectionNames.style}>
               { children.container.stylePropertyView() }
-            </Section>
+              </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
             {children.container.children.showHeader.getView() && (
               <Section name={"Header Style"}>
                 { children.container.headerStylePropertyView() }
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx
index 6681a9635..1edf9c97b 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx
@@ -20,7 +20,7 @@ import { TriContainer } from "../triContainerComp/triFloatTextContainer";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { withDefault } from "comps/generators/simpleGenerators";
 import { styleControl } from "comps/controls/styleControl";
-import { TextStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, TextStyle } from "comps/controls/styleControlConstants";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
@@ -63,6 +63,7 @@ export const ContainerBaseComp = (function () {
     horizontalAlignment: alignWithJustifyControl(),
     width: withDefault(StringControl, "40"),
     style: styleControl(TextStyle),
+    animationStyle: styleControl(AnimationStyle),
   };
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
     return <TriContainer {...props} />;
@@ -95,6 +96,9 @@ export const ContainerBaseComp = (function () {
               <Section name={"Floating Text Style"}>
                 {children.style.getPropertyView()}
               </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
               <Section name={"Container Style"}>
                 {children.container.stylePropertyView()}
               </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
index f3182b38f..cbe85cd22 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import {  DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
+import {  AnimationStyle, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
 import { withMethodExposing } from "../../generators/withMethodExposing";
 import {
   disabledPropertyView,
@@ -77,6 +77,7 @@ const commonChildren = {
   minuteStep: RangeControl.closed(1, 60, 1),
   secondStep: RangeControl.closed(1, 60, 1),
   style: styleControl(InputFieldStyle),
+  animationStyle: styleControl(AnimationStyle),
   labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
   suffixIcon: withDefault(IconControl, "/icon:regular/calendar"),
   ...validationChildren,
@@ -174,6 +175,7 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
     style: props.style,
     labelStyle: props.labelStyle,
     inputFieldStyle:props.inputFieldStyle,
+    animationStyle:props.animationStyle,
     children: (
       <DateUIView
         viewRef={props.viewRef}
@@ -263,6 +265,9 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
             <Section name={sectionNames.inputFieldStyle}>
               {children.inputFieldStyle.getPropertyView()}
             </Section>
+            <Section name={sectionNames.animationStyle}>
+              {children.animationStyle.getPropertyView()}
+            </Section>
           </>
         )}
       </>
diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
index 338ae6d7f..42f0307ea 100644
--- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
@@ -8,7 +8,7 @@ import { Section, sectionNames } from "lowcoder-design";
 import _ from "lodash";
 import styled from "styled-components";
 import { styleControl } from "comps/controls/styleControl";
-import { DividerStyle, DividerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, DividerStyle, DividerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -16,7 +16,11 @@ import { trans } from "i18n";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
-type IProps = DividerProps & { $style: DividerStyleType; dashed: boolean };
+type IProps = DividerProps & {
+  $style: DividerStyleType;
+  dashed: boolean;
+  $animationStyle:AnimationStyleType;
+};
 
 // TODO: find out how to set border style when text is active
 // TODO: enable type "vertical" https://ant.design/components/divider
@@ -34,6 +38,7 @@ const StyledDivider = styled(Divider) <IProps>`
     text-decoration:${(props)=>props.$style.textDecoration};
     font-style:${(props) => props.$style.fontStyle}
   }
+  ${props=>props.$animationStyle}
   min-width: 0;	
   width: ${(props) => {
     return widthCalculator(props.$style.margin);
@@ -66,6 +71,7 @@ const childrenMap = {
   dashed: BoolControl,
   align: alignControl(),
   style: styleControl(DividerStyle),
+  animationStyle: styleControl(AnimationStyle),
 };
 
 function fixOldStyleData(oldData: any) {
@@ -87,7 +93,12 @@ function fixOldStyleData(oldData: any) {
 export const DividerComp = migrateOldData(
   new UICompBuilder(childrenMap, (props) => {
     return (
-      <StyledDivider orientation={props.align} dashed={props.dashed} $style={props.style}>
+      <StyledDivider
+        orientation={props.align}
+        dashed={props.dashed}
+        $style={props.style}
+        $animationStyle={props.animationStyle}
+      >
         {props.title}
       </StyledDivider>
     );
@@ -118,6 +129,9 @@ export const DividerComp = migrateOldData(
                 {children.dashed.propertyView({ label: trans("divider.dashed") })}
                 {children.style.getPropertyView()}
               </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
index 9201b4f23..3b231b4b7 100644
--- a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
@@ -58,6 +58,7 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
 import { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { styled } from "styled-components";
+import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
 
 const FormWrapper = styled.div`
   height: 100%;
@@ -78,6 +79,7 @@ const childrenMap = {
   disableSubmit: BoolCodeControl,
   loading: BoolCodeControl,
   onEvent: eventHandlerControl(eventOptions),
+  animationStyle:styleControl(AnimationStyle)
 };
 
 type FormProps = TriContainerViewProps &
@@ -235,6 +237,9 @@ const FormBaseComp = (function () {
               <Section name={sectionNames.style}>
                 {children.container.stylePropertyView()}
               </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
               {children.container.children.showHeader.getView() && (
                 <Section name={"Header Style"}>
                   { children.container.headerStylePropertyView() }
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
index 6663d527e..33995353c 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
@@ -9,7 +9,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { LabelControl } from "comps/controls/labelControl";
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
-import { JsonEditorStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, JsonEditorStyle } from "comps/controls/styleControlConstants";
 import { styleControl } from "comps/controls/styleControl";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
 import { useRef, useEffect, useContext } from "react";
@@ -66,6 +66,7 @@ const childrenMap = {
   onEvent: ChangeEventHandlerControl,
   label: withDefault(LabelControl, { position: "column" }),
   style: styleControl(JsonEditorStyle),
+  animationStyle: styleControl(AnimationStyle),
 
   ...formDataChildren,
 };
@@ -117,6 +118,7 @@ let JsonEditorTmpComp = (function () {
     }
     return props.label({
       style: props.style,
+      animationStyle: props.animationStyle,
       children: <Wrapper ref={wrapperRef} onFocus={() => (editContent.current = "focus")} />,
     });
   })
@@ -138,7 +140,10 @@ let JsonEditorTmpComp = (function () {
 
           {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( children.label.getPropertyView() )}
           {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+            <>
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+              <Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
+              </>
           )}
 
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
index ee317c13c..c0ed71fae 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
@@ -11,6 +11,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { EditorContext } from "comps/editorState";
 import { useContext } from "react";
+import { AnimationStyle, AnimationStyleType, styleControl } from "@lowcoder-ee/index.sdk";
 
 /**
  * JsonExplorer Comp
@@ -34,7 +35,11 @@ const bgColorMap = {
   flat: "#2c3e50",
 };
 
-const JsonExplorerContainer = styled.div<{ $theme: keyof typeof bgColorMap }>`
+const JsonExplorerContainer = styled.div<{
+  $theme: keyof typeof bgColorMap;
+  $animationStyle: AnimationStyleType;
+}>`
+  ${(props) => props.$animationStyle}
   height: 100%;
   overflow-y: scroll;
   background-color: ${(props) => bgColorMap[props.$theme] || "#ffffff"};
@@ -48,10 +53,14 @@ let JsonExplorerTmpComp = (function () {
     value: withDefault(ArrayOrJSONObjectControl, JSON.stringify(defaultData, null, 2)),
     indent: withDefault(NumberControl, 4),
     expandToggle: BoolControl.DEFAULT_TRUE,
-    theme: dropdownControl(themeOptions, "shapeshifter:inverted"),
+    theme: dropdownControl(themeOptions, 'shapeshifter:inverted'),
+    animationStyle:styleControl(AnimationStyle),
   };
   return new UICompBuilder(childrenMap, (props) => (
-    <JsonExplorerContainer $theme={props.theme as keyof typeof bgColorMap}>
+    <JsonExplorerContainer
+      $theme={props.theme as keyof typeof bgColorMap}
+      $animationStyle={props.animationStyle}
+    >
       <ReactJson
         name={false}
         src={props.value}
@@ -82,12 +91,18 @@ let JsonExplorerTmpComp = (function () {
             </Section>
           )}
 
-          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-            <Section name={sectionNames.style}>
-              {children.theme.propertyView({
-                label: trans("jsonExplorer.theme"),
-              })}
-            </Section>
+          {(useContext(EditorContext).editorModeStatus === 'layout' ||
+            useContext(EditorContext).editorModeStatus === 'both') && (
+            <>
+              <Section name={sectionNames.style}>
+                {children.theme.propertyView({
+                  label: trans('jsonExplorer.theme'),
+                })}
+              </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
+            </>
           )}
         </>
       );
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
index dfe00127f..021325ddf 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
@@ -6,7 +6,7 @@ import { default as Button } from "antd/es/button";
 import { BoolControl } from "comps/controls/boolControl";
 import { jsonObjectExposingStateControl } from "comps/controls/codeStateControl";
 import { styleControl } from "comps/controls/styleControl";
-import { JsonSchemaFormStyle, type JsonSchemaFormStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, JsonSchemaFormStyle, type JsonSchemaFormStyleType } from "comps/controls/styleControlConstants";
 import { depsConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { withMethodExposing } from "comps/generators/withMethodExposing";
 import type { ValueFromOption } from "lowcoder-design";
@@ -32,7 +32,11 @@ const Form = withTheme(Theme);
 
 const EventOptions = [submitEvent] as const;
 
-const Container = styled.div<{ $style: JsonSchemaFormStyleType }>`
+const Container = styled.div<{
+  $style: JsonSchemaFormStyleType;
+  $animationStyle: AnimationStyleType;
+}>`
+  ${(props) => props.$animationStyle}
   background: ${(props) => props.$style.background};
   border: 1px solid ${(props) => props.$style.border};
   padding: 15px;
@@ -188,6 +192,7 @@ let FormBasicComp = (function () {
     data: jsonObjectExposingStateControl("data", i18nObjs.jsonForm.defaultFormData),
     onEvent: eventHandlerControl(EventOptions),
     style: styleControl(JsonSchemaFormStyle),
+    animationStyle: styleControl(AnimationStyle),
   };
   return new UICompBuilder(childrenMap, (props) => {
     // rjsf 4.20 supports ui:submitButtonOptions, but if the button is customized, it will not take effect. Here we implement it ourselves
@@ -196,7 +201,7 @@ let FormBasicComp = (function () {
     ] as UISchemaSubmitButtonOptions;
 
     return (
-      <Container $style={props.style}>
+      <Container $style={props.style} $animationStyle={props.animationStyle}>
         <ErrorBoundary>
           <Form
             validator={validator}
@@ -319,9 +324,14 @@ let FormBasicComp = (function () {
           )}
 
           {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+            <>
             <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
             </Section>
+            <Section name={sectionNames.animationStyle}>
+              {children.animationStyle.getPropertyView()}
+              </Section>
+              </>
           )}
 
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
index 1e64730f9..b67f84127 100644
--- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
@@ -12,7 +12,11 @@ import { default as Dropdown } from "antd/es/dropdown";
 import { default as Menu, MenuProps } from "antd/es/menu";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { styleControl } from "comps/controls/styleControl";
-import { NavigationStyle } from "comps/controls/styleControlConstants";
+import {
+  AnimationStyle,
+  AnimationStyleType,
+  NavigationStyle,
+} from "comps/controls/styleControlConstants";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
@@ -25,9 +29,13 @@ type IProps = {
   $borderColor: string;
   $borderWidth: string;
   $borderRadius: string;
+  $animationStyle:AnimationStyleType;
 };
 
-const Wrapper = styled("div") <Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth" | "$borderRadius">>`
+const Wrapper = styled("div")<
+  Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth" | "$borderRadius"|"$animationStyle">
+  >`
+${props=>props.$animationStyle}
   height: 100%;
   border-radius: ${(props) => props.$borderRadius ? props.$borderRadius : '2px'};
   box-sizing: border-box;
@@ -127,6 +135,7 @@ const childrenMap = {
   logoEvent: withDefault(eventHandlerControl(logoEventHandlers), [{ name: "click" }]),
   horizontalAlignment: alignWithJustifyControl(),
   style: migrateOldData(styleControl(NavigationStyle), fixOldStyleData),
+  animationStyle: styleControl(AnimationStyle),
   items: withDefault(navListComp(), [
     {
       label: trans("menuItem") + " 1",
@@ -203,6 +212,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
 
   return (
     <Wrapper
+      $animationStyle={props.animationStyle}
       $borderColor={props.style.border}
       $bgColor={props.style.background}
       $borderWidth={props.style.borderWidth}
@@ -249,10 +259,16 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
           </Section>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-          <Section name={sectionNames.style}>
-            {children.style.getPropertyView()}
-          </Section>
+        {(useContext(EditorContext).editorModeStatus === "layout" ||
+          useContext(EditorContext).editorModeStatus === "both") && (
+          <>
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.animationStyle}>
+              {children.animationStyle.getPropertyView()}
+            </Section>
+          </>
         )}
       </>
     );
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index cd633ec48..7d7f3b1ec 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -30,7 +30,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
 import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
 import { RefControl } from "../../controls/refControl";
 import { styleControl } from "comps/controls/styleControl";
-import {  InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import {  AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import {
   disabledPropertyView,
   hiddenPropertyView,
@@ -258,8 +258,9 @@ const childrenMap = {
   onEvent: InputEventHandlerControl,
   viewRef: RefControl<HTMLInputElement>,
   style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
-  labelStyle:styleControl(LabelStyle),
-  prefixText : stringExposingStateControl("defaultValue"),
+  labelStyle: styleControl(LabelStyle),
+  animationStyle: styleControl(AnimationStyle),
+  prefixText: stringExposingStateControl('defaultValue'),
   prefixIcon: IconControl,
   inputFieldStyle: withDefault(styleControl(InputLikeStyle), {borderWidth: '1px'}) ,
   // validation
@@ -384,6 +385,7 @@ let NumberInputTmpComp = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      animationStyle:props.animationStyle,
       ...validate(props),
     });
   })
@@ -442,6 +444,9 @@ let NumberInputTmpComp = (function () {
           <Section name={sectionNames.inputFieldStyle}>
             {children.inputFieldStyle.getPropertyView()}
           </Section>
+          <Section name={sectionNames.animationStyle}>
+            {children.animationStyle.getPropertyView()}
+          </Section>
           </>
         )}
       </>
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx
index ee4f545c2..e6e92f8ee 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx
@@ -19,6 +19,7 @@ const RangeSliderBasicComp = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      animationStyle:props.animationStyle,
       children: (
         <SliderWrapper
           vertical={props.vertical}
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
index 3f7c2de69..a73b39a47 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
@@ -23,6 +23,7 @@ const SliderBasicComp = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      animationStyle:props.animationStyle,
       children: (
         <SliderWrapper
           vertical={props.vertical}
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
index ad4c7e206..55e91cd64 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
 import { Section, sectionNames } from "lowcoder-design";
 import { RecordConstructorToComp } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
-import {  InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, heightCalculator, widthCalculator  } from "comps/controls/styleControlConstants";
+import {  AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, heightCalculator, widthCalculator  } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { default as Slider } from "antd/es/slider";
 import { darkenColor, fadeColor } from "lowcoder-design";
@@ -75,7 +75,8 @@ export const SliderChildren = {
   labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)),
   prefixIcon: IconControl,
   suffixIcon: IconControl,
-  inputFieldStyle:styleControl(SliderStyle)
+  inputFieldStyle:styleControl(SliderStyle),
+  animationStyle:styleControl(AnimationStyle)
 };
 
 export const SliderPropertyView = (
@@ -109,6 +110,9 @@ export const SliderPropertyView = (
         <Section name={sectionNames.inputFieldStyle}>
           {children.inputFieldStyle.getPropertyView()}
         </Section>
+        <Section name={sectionNames.animationStyle}>
+          {children.animationStyle.getPropertyView()}
+        </Section>
       </>
     )}
   </>
diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
index 2e859ba9a..3d3e2aa72 100644
--- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
@@ -1,4 +1,4 @@
-import { ContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyleType, ContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { EditorContext } from "comps/editorState";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import { HintPlaceHolder, ScrollBar } from "lowcoder-design";
@@ -38,13 +38,14 @@ const getStyle = (style: ContainerStyleType) => {
   `;
 };
 
-const Wrapper = styled.div<{ $style: ContainerStyleType }>`
+const Wrapper = styled.div<{ $style: ContainerStyleType,$animationStyle:AnimationStyleType }>`
   display: flex;
   flex-flow: column;
   height: 100%;
   border: 1px solid #d7d9e0;
   border-radius: 4px;
   ${(props) => props.$style && getStyle(props.$style)}
+  ${props=>props.$animationStyle}
 `;
 
 const HeaderInnerGrid = styled(InnerGrid)<{
@@ -109,11 +110,12 @@ const FooterInnerGrid = styled(InnerGrid)<{
 
 export type LayoutProps = LayoutViewProps & {
   hintPlaceholder?: ReactNode;
+  animationStyle:AnimationStyleType;
 };
 
 
 export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSiderCollapsed: (collapsed: boolean) => void }) {
-  const { container, siderCollapsed, setSiderCollapsed } = props;
+  const {container, siderCollapsed, setSiderCollapsed, animationStyle} = props;
   const { showHeader, showFooter, showSider } = container;
   const { items: headerItems, ...otherHeaderProps } = container.header;
   const { items: bodyItems, ...otherBodyProps } = container.body["0"].children.view.getView();
@@ -152,7 +154,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
             },
           }}
         >
-      <Wrapper $style={style}>
+      <Wrapper $style={style} $animationStyle={animationStyle}>
         <Layout style={{padding: "0px"}} hasSider={showSider && !container.innerSider}>
           {showSider && !container.innerSider && !container.siderRight && (
             <><BackgroundColorContext.Provider value={siderStyle?.siderBackground}>
@@ -362,8 +364,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
                   collapsedWidth={container.siderCollapsedWidth}
                   reverseArrow={true}
                   collapsed={siderCollapsed} onCollapse={(value) => setSiderCollapsed(value)}
-                  
-                >
+                   >
                     <ScrollBar style={{ height: container.autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!container.siderScrollbars}>
                       <SiderInnerGrid
                         {...otherSiderProps}
diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
index c39b39100..23ddb8fce 100644
--- a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
@@ -1,6 +1,6 @@
 import { default as Progress } from "antd/es/progress";
 import { styleControl } from "comps/controls/styleControl";
-import { CircleProgressStyle, CircleProgressType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, CircleProgressStyle, CircleProgressType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { Section, sectionNames } from "lowcoder-design";
 import { numberExposingStateControl } from "../controls/codeStateControl";
@@ -45,7 +45,11 @@ const getStyle = (style: CircleProgressType) => {
   `;
 };
 
-export const StyledProgressCircle = styled(Progress) <{ $style: CircleProgressType }>`
+export const StyledProgressCircle = styled(Progress)<{
+  $style: CircleProgressType;
+  $animationStyle?: AnimationStyleType;
+}>`
+  ${(props) => props.$animationStyle}
   width: 100%;
   height: 100%;
   padding: 2px;
@@ -66,11 +70,13 @@ let ProgressCircleTmpComp = (function () {
     value: numberExposingStateControl("value", 60),
     // borderRadius property hidden as it's not valid for progress circle
     style: styleControl(CircleProgressStyle),
+    animationStyle: styleControl(AnimationStyle),
   };
   return new UICompBuilder(childrenMap, (props) => {
     return (
       <StyledProgressCircle
         $style={props.style}
+        $animationStyle={props.animationStyle}
         percent={Math.round(props.value.value)}
         type="circle"
       />
@@ -93,9 +99,14 @@ let ProgressCircleTmpComp = (function () {
           )}
 
           {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
-            <Section name={sectionNames.style}>
+            <>
+              <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
-            </Section>
+              </Section>
+              <Section name={sectionNames.animationStyle}>
+              {children.animationStyle.getPropertyView()}
+              </Section>
+              </>
           )}
         </>
       );
diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
index 9090fa249..875fe5117 100644
--- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
@@ -5,7 +5,7 @@ import { BoolControl } from "../controls/boolControl";
 import { UICompBuilder } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { styleControl } from "comps/controls/styleControl";
-import { ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -44,15 +44,17 @@ const getStyle = (style: ProgressStyleType) => {
   `;
 };
 
-export const ProgressStyled = styled(Progress)<{ $style: ProgressStyleType }>`
+export const ProgressStyled = styled(Progress)<{ $style: ProgressStyleType,$animationStyle?: AnimationStyleType}>`
   ${(props) => props.$style && getStyle(props.$style)}
+  ${props=>props.$animationStyle}
 `;
 
 const ProgressBasicComp = (function () {
   const childrenMap = {
-    value: numberExposingStateControl("value", 60),
+    value: numberExposingStateControl('value', 60),
     showInfo: BoolControl,
     style: styleControl(ProgressStyle),
+    animationStyle: styleControl(AnimationStyle),
   };
   return new UICompBuilder(childrenMap, (props) => {
     return (
@@ -60,6 +62,7 @@ const ProgressBasicComp = (function () {
         percent={Math.round(props.value.value)}
         showInfo={props.showInfo}
         $style={props.style}
+        $animationStyle={props.animationStyle}
       />
     );
   })
@@ -83,9 +86,14 @@ const ProgressBasicComp = (function () {
           )}
 
           {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
-            <Section name={sectionNames.style}>
+            <>
+              <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
             </Section>
+              <Section name={sectionNames.animationStyle}>
+              {children.animationStyle.getPropertyView()}
+            </Section>
+            </>
           )}
         </>
       );
diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
index 3bf8e8549..d679f7a07 100644
--- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
@@ -10,7 +10,7 @@ import { UICompBuilder, withDefault } from "../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import {  InputFieldStyle, LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
+import {  AnimationStyle, InputFieldStyle, LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -44,8 +44,13 @@ const RatingBasicComp = (function () {
     disabled: BoolCodeControl,
     onEvent: eventHandlerControl(EventOptions),
     style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
-    labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
-    inputFieldStyle:migrateOldData(styleControl(RatingStyle), fixOldData),
+    animationStyle: styleControl(AnimationStyle),
+    labelStyle: styleControl(
+      LabelStyle.filter(
+        (style) => ['accent', 'validate'].includes(style.name) === false
+      )
+    ),
+    inputFieldStyle: migrateOldData(styleControl(RatingStyle), fixOldData),
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {
@@ -68,6 +73,7 @@ const RatingBasicComp = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      animationStyle:props.animationStyle,
       children: (
         <RateStyled
           count={props.max}
@@ -124,6 +130,9 @@ const RatingBasicComp = (function () {
               <Section name={sectionNames.inputFieldStyle}>
                 {children.inputFieldStyle.getPropertyView()}
               </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
index 6e5b807b0..6e62b9ffc 100644
--- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -10,7 +10,9 @@ import {
   ResponsiveLayoutRowStyle,
   ResponsiveLayoutRowStyleType,
   ResponsiveLayoutColStyleType,
-  ResponsiveLayoutColStyle
+  ResponsiveLayoutColStyle,
+  AnimationStyle,
+  AnimationStyleType
 } from "comps/controls/styleControlConstants";
 import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
 import { addMapChildAction } from "comps/generators/sameTypeMap";
@@ -41,7 +43,11 @@ import { EditorContext } from "comps/editorState";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
 
-const RowWrapper = styled(Row)<{$style: ResponsiveLayoutRowStyleType}>`
+const RowWrapper = styled(Row)<{
+  $style: ResponsiveLayoutRowStyleType;
+  $animationStyle: AnimationStyleType;
+}>`
+  ${(props) => props.$animationStyle}
   height: 100%;
   border: 1px solid ${(props) => props.$style.border};
   border-radius: ${(props) => props.$style.radius};
@@ -77,6 +83,7 @@ const childrenMap = {
   matchColumnsHeight: withDefault(BoolControl, true),
   rowStyle: withDefault(styleControl(ResponsiveLayoutRowStyle), {}),
   columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle), {}),
+  animationStyle:styleControl(AnimationStyle),
   columnPerRowLG: withDefault(NumberControl, 4),
   columnPerRowMD: withDefault(NumberControl, 2),
   columnPerRowSM: withDefault(NumberControl, 1),
@@ -117,6 +124,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
     columnPerRowSM,
     verticalSpacing,
     horizontalSpacing,
+    animationStyle
   } = props;
 
   return (
@@ -125,6 +133,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
         <div style={{padding: rowStyle.margin, height: '100%'}}>
           <RowWrapper
             $style={rowStyle}
+            $animationStyle={animationStyle}
             wrap={rowBreak}
             gutter={[horizontalSpacing, verticalSpacing]}
           >
@@ -248,6 +257,9 @@ export const ResponsiveLayoutBaseComp = (function () {
             <Section name={trans("responsiveLayout.columnStyle")}>
               {children.columnStyle.getPropertyView()}
             </Section>
+            <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+            </Section>
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
index d6503d4fd..095e85f74 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
@@ -43,6 +43,7 @@ let CascaderBasicComp = (function () {
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
       childrenInputFieldStyle:props.childrenInputFieldStyle,
+      animationStyle:props.animationStyle,
       children: (
         <CascaderStyle
           ref={props.viewRef}
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
index 4222ce0a8..1cddea94b 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
@@ -6,7 +6,7 @@ import { arrayStringExposingStateControl } from "comps/controls/codeStateControl
 import { BoolControl } from "comps/controls/boolControl";
 import { LabelControl } from "comps/controls/labelControl";
 import { styleControl } from "comps/controls/styleControl";
-import { CascaderStyle, ChildrenMultiSelectStyle, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, CascaderStyle, ChildrenMultiSelectStyle, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
 import {
   allowClearPropertyView,
   disabledPropertyView,
@@ -41,7 +41,8 @@ export const CascaderChildren = {
   margin: MarginControl,
   padding: PaddingControl,
   inputFieldStyle:styleControl(CascaderStyle),
-  childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle)
+  childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle),
+  animationStyle:styleControl(AnimationStyle)
 };
 
 export const CascaderPropertyView = (
@@ -87,6 +88,9 @@ export const CascaderPropertyView = (
         <Section name={'Children Input Field Style'}>
           {children.childrenInputFieldStyle.getPropertyView()}
         </Section>
+        <Section name={sectionNames.animationStyle}>
+          {children.animationStyle.getPropertyView()}
+        </Section>
       </>
     )}
   </>
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
index c0cc28a7d..ac3eb7999 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -15,7 +15,7 @@ import {
 } from "./selectInputConstants";
 import { formDataChildren } from "../formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import { CheckboxStyle, CheckboxStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, CheckboxStyle, CheckboxStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
 import { RadioLayoutOptions, RadioPropertyView } from "./radioCompConstants";
 import { dropdownControl } from "../../controls/dropdownControl";
 import { ValueFromOption } from "lowcoder-design";
@@ -141,6 +141,7 @@ let CheckboxBasicComp = (function () {
     layout: dropdownControl(RadioLayoutOptions, "horizontal"),
     viewRef: RefControl<HTMLDivElement>,
     inputFieldStyle:styleControl(CheckboxStyle),
+    animationStyle:styleControl(AnimationStyle),
     ...SelectInputValidationChildren,
     ...formDataChildren,
   };
@@ -154,6 +155,7 @@ let CheckboxBasicComp = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      animationStyle:props.animationStyle,
       children: (
         <CheckboxGroup
           ref={props.viewRef}
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
index 6b1a08fcd..dfc5ed714 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -106,6 +106,7 @@ let RadioBasicComp = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      animationStyle:props.animationStyle,
       children: (
         <Radio
           ref={props.viewRef}
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
index a9b93d60f..88ddc191c 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
@@ -14,7 +14,7 @@ import {
 } from "./selectInputConstants";
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import {  InputFieldStyle, LabelStyle, RadioStyle } from "comps/controls/styleControlConstants";
+import {  AnimationStyle, InputFieldStyle, LabelStyle, RadioStyle } from "comps/controls/styleControlConstants";
 import { dropdownControl } from "../../controls/dropdownControl";
 import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -40,7 +40,8 @@ export const RadioChildrenMap = {
   labelStyle:styleControl(LabelStyle),
   layout: dropdownControl(RadioLayoutOptions, "horizontal"),
   viewRef: RefControl<HTMLDivElement>,
-  inputFieldStyle:styleControl(RadioStyle),
+  inputFieldStyle: styleControl(RadioStyle),
+  animationStyle: styleControl(AnimationStyle),
   ...SelectInputValidationChildren,
   ...formDataChildren,
 };
@@ -97,6 +98,7 @@ export const RadioPropertyView = (
       <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
       <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
       <Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
+      <Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
       </>
     )}
   </>
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
index 8470bd8b1..2b97a324b 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
@@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { LabelControl } from "comps/controls/labelControl";
 import { SelectOptionControl } from "comps/controls/optionsControl";
 import { styleControl } from "comps/controls/styleControl";
-import { SegmentStyle, SegmentStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, SegmentStyle, SegmentStyleType } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { UICompBuilder } from "../../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
@@ -77,7 +77,8 @@ const SegmentChildrenMap = {
   disabled: BoolCodeControl,
   onEvent: ChangeEventHandlerControl,
   options: SelectOptionControl,
-  style: withDefault(styleControl(SegmentStyle),{borderWidth:'1px'}),
+  style: withDefault(styleControl(SegmentStyle), { borderWidth: '1px' }),
+  animationStyle:styleControl(AnimationStyle),
   viewRef: RefControl<HTMLDivElement>,
 
   ...SelectInputValidationChildren,
@@ -93,6 +94,7 @@ let SegmentedControlBasicComp = (function () {
     return props.label({
       required: props.required,
       style: props.style,
+      animationStyle: props.animationStyle,
       children: (
         <Segmented
           ref={props.viewRef}
@@ -138,9 +140,14 @@ let SegmentedControlBasicComp = (function () {
         )}
 
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <>
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
           </Section>
+          <Section name={sectionNames.animationStyle}>
+            {children.animationStyle.getPropertyView()}
+            </Section>
+            </>
         )}
       </>
     ))
diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
index 8b113857f..7c4820e37 100644
--- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
@@ -4,7 +4,7 @@ import { booleanExposingStateControl } from "comps/controls/codeStateControl";
 import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { LabelControl } from "comps/controls/labelControl";
 import { styleControl } from "comps/controls/styleControl";
-import { SwitchStyle, SwitchStyleType, LabelStyle,  InputFieldStyle } from "comps/controls/styleControlConstants";
+import { SwitchStyle, SwitchStyleType, LabelStyle,  InputFieldStyle, AnimationStyle } from "comps/controls/styleControlConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { Section, sectionNames } from "lowcoder-design";
 import styled, { css } from "styled-components";
@@ -90,7 +90,12 @@ let SwitchTmpComp = (function () {
     onEvent: eventHandlerControl(EventOptions),
     disabled: BoolCodeControl,
     style: styleControl(InputFieldStyle),
-    labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
+    animationStyle: styleControl(AnimationStyle),
+    labelStyle: styleControl(
+      LabelStyle.filter(
+        (style) => ['accent', 'validate'].includes(style.name) === false
+      )
+    ),
     viewRef: RefControl<HTMLElement>,
     inputFieldStyle:migrateOldData(styleControl(SwitchStyle), fixOldData),
     ...formDataChildren,
@@ -100,6 +105,7 @@ let SwitchTmpComp = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      animationStyle:props.animationStyle,
       children: (
         <SwitchWrapper disabled={props.disabled} $style={props.inputFieldStyle}>
           <Switch
@@ -148,6 +154,9 @@ let SwitchTmpComp = (function () {
               <Section name={sectionNames.inputFieldStyle}>
                 {children.inputFieldStyle.getPropertyView()}
               </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
index 1a1899522..5bd7e3253 100644
--- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -7,7 +7,7 @@ import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { TabsOptionControl } from "comps/controls/optionsControl";
 import { styleControl } from "comps/controls/styleControl";
-import { ContainerBodyStyle, ContainerBodyStyleType, ContainerHeaderStyle, ContainerHeaderStyleType, TabContainerStyle, TabContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, ContainerBodyStyle, ContainerBodyStyleType, ContainerHeaderStyle, ContainerHeaderStyleType, TabContainerStyle, TabContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
 import { addMapChildAction } from "comps/generators/sameTypeMap";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
@@ -60,6 +60,7 @@ const childrenMap = {
   style: withDefault(styleControl(TabContainerStyle),{borderWidth:'1px'}),
   headerStyle: styleControl(ContainerHeaderStyle),
   bodyStyle: styleControl(ContainerBodyStyle),
+  animationStyle: styleControl(AnimationStyle),
   tabsGutter: withDefault(NumberControl, 32),
   tabsCentered: withDefault(BoolControl, false),
 };
@@ -133,9 +134,11 @@ const StyledTabs = styled(Tabs)<{
   $bodyStyle: ContainerBodyStyleType;
   $isMobile?: boolean; 
   $showHeader?: boolean;
+  $animationStyle:AnimationStyleType
 }>`
   &.ant-tabs {
     height: 100%;
+    ${props=>props.$animationStyle}
   }
 
   .ant-tabs-content-animated {
@@ -251,7 +254,8 @@ const TabbedContainer = (props: TabbedContainerProps) => {
     <ScrollBar style={{ height: props.autoHeight ? "100%" : "auto", margin: "0px", padding: "0px" }} hideScrollbar={!props.scrollbars}>
       <div style={{padding: props.style.margin, height: props.autoHeight ? "100%" : "auto"}}>
         <BackgroundColorContext.Provider value={headerStyle.headerBackground}>
-            <StyledTabs
+          <StyledTabs
+            $animationStyle={props.animationStyle}
               tabPosition={props.placement}
               activeKey={activeKey}
               $style={style}
@@ -270,7 +274,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
               items={tabItems}
               tabBarGutter={props.tabsGutter}
               centered={props.tabsCentered}
-            >
+          >
           </StyledTabs>
         </BackgroundColorContext.Provider>
       </div>
@@ -331,6 +335,9 @@ export const TabbedContainerBaseComp = (function () {
               <Section name={"Body Style"}>
                 { children.bodyStyle.getPropertyView() }
               </Section>
+              <Section name={sectionNames.animationStyle}>
+                { children.animationStyle.getPropertyView() }
+              </Section>
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index fd9ce1f18..d312d1de2 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -10,7 +10,7 @@ import { UICompBuilder } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
 import { styleControl } from "comps/controls/styleControl";
-import { TextStyle, TextStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, TextStyle, TextStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
@@ -72,10 +72,15 @@ const getStyle = (style: TextStyleType) => {
   `;
 };
 
-const TextContainer = styled.div<{ $type: string; $styleConfig: TextStyleType }>`
+const TextContainer = styled.div<{
+  $type: string;
+  $styleConfig: TextStyleType;
+  $animationStyle:AnimationStyleType;
+}>`
   height: 100%;
   overflow: auto;
   margin: 0;
+  ${props=>props.$animationStyle}
   ${(props) =>
     props.$type === "text" && "white-space:break-spaces;line-height: 1.9;"};
   ${(props) => props.$styleConfig && getStyle(props.$styleConfig)}
@@ -126,6 +131,7 @@ let TextTmpComp = (function () {
     horizontalAlignment: alignWithJustifyControl(),
     verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
     style: styleControl(TextStyle),
+    animationStyle: styleControl(AnimationStyle),
     margin: MarginControl,
     padding: PaddingControl,
   };
@@ -133,6 +139,7 @@ let TextTmpComp = (function () {
     const value = props.text.value;
     return (
       <TextContainer
+        $animationStyle={props.animationStyle}
         $type={props.type}
         $styleConfig={props.style}
         style={{
@@ -180,6 +187,9 @@ let TextTmpComp = (function () {
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}
               </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
index 3e71e3b3d..dc729e78d 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -1,7 +1,7 @@
 import { Input, Section, sectionNames } from "lowcoder-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl";
-import { InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants";
 import {
   NameConfig,
   NameConfigPlaceHolder,
@@ -54,6 +54,7 @@ const childrenMap = {
   prefixIcon: IconControl,
   suffixIcon: IconControl,
   inputFieldStyle: styleControl(InputLikeStyle),
+  animationStyle: styleControl(AnimationStyle),
 };
 
 let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
@@ -74,6 +75,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
     style: props.style,
     labelStyle: props.labelStyle,
     inputFieldStyle:props.inputFieldStyle,
+    animationStyle:props.animationStyle,
     ...validateState,
   });
 })
@@ -105,6 +107,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
             <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
             <Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
+            <Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
           </>
         )}
       </>
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
index 0c1e5235e..0a5add0a5 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
@@ -22,6 +22,7 @@ import {
 import { styleControl } from "comps/controls/styleControl";
 import styled from "styled-components";
 import {
+  AnimationStyle,
   InputLikeStyle,
   InputLikeStyleType,
 } from "comps/controls/styleControlConstants";
@@ -96,6 +97,7 @@ let MentionTmpComp = (function () {
     allowClear: BoolControl,
     autoHeight: AutoHeightControl,
     style: styleControl(InputLikeStyle),
+    animationStyle: styleControl(AnimationStyle),
     mentionList: jsonControl(checkMentionListData, {
       "@": ["Li Lei", "Han Meimei"],
       "#": ["123", "456", "789"],
@@ -218,6 +220,7 @@ let MentionTmpComp = (function () {
         </Wrapper>
       ),
       style: props.style,
+      animationStyle: props.animationStyle,
       ...validateState,
     });
   })
@@ -260,9 +263,14 @@ let MentionTmpComp = (function () {
         )}
 
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
-          <><Section name={sectionNames.style}>
+          <>
+            <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
-          </Section></>
+            </Section>
+            <Section name={sectionNames.animationStyle}>
+            {children.animationStyle.getPropertyView()}
+            </Section>
+          </>
         )}
       </>
     ))
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
index ca005ea32..2002a8476 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -26,7 +26,7 @@ import {
 import { withMethodExposing } from "../../generators/withMethodExposing";
 import { styleControl } from "comps/controls/styleControl";
 import styled from "styled-components";
-import {  InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
+import {  AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
 import {
   hiddenPropertyView,
   minLengthPropertyView,
@@ -59,7 +59,8 @@ let PasswordTmpComp = (function () {
     prefixIcon: IconControl,
     style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
     labelStyle: styleControl(LabelStyle),
-    inputFieldStyle: styleControl(InputLikeStyle)
+    inputFieldStyle: styleControl(InputLikeStyle),
+  animationStyle: styleControl(AnimationStyle),
   };
   return new UICompBuilder(childrenMap, (props) => {
     const [inputProps, validateState] = useTextInputProps(props);
@@ -77,6 +78,7 @@ let PasswordTmpComp = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
+      animationStyle:props.animationStyle,
       ...validateState,
     });
   })
@@ -113,6 +115,7 @@ let PasswordTmpComp = (function () {
               <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
               <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
               <Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
+              <Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
index 530ce4afe..0698d64a4 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -22,7 +22,7 @@ import {
 import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
 import { styleControl } from "comps/controls/styleControl";
 import styled from "styled-components";
-import {  InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
+import {  AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
 import { TextArea } from "components/TextArea";
 import {
   allowClearPropertyView,
@@ -73,7 +73,8 @@ let TextAreaTmpComp = (function () {
     autoHeight: withDefault(AutoHeightControl, "fixed"),
     style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
     labelStyle: styleControl(LabelStyle),
-    inputFieldStyle: styleControl(InputLikeStyle)
+    inputFieldStyle: styleControl(InputLikeStyle),
+    animationStyle: styleControl(AnimationStyle)
   };
   return new UICompBuilder(childrenMap, (props) => {
     const [inputProps, validateState] = useTextInputProps(props);
@@ -93,6 +94,7 @@ let TextAreaTmpComp = (function () {
       ),
       style: props.style,
       labelStyle: props.labelStyle,
+      animationStyle: props.animationStyle,
       ...validateState,
     });
   })
@@ -123,6 +125,7 @@ let TextAreaTmpComp = (function () {
             <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
             <Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
             <Section name={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
+            <Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
           </>
         )}
       </>
diff --git a/client/packages/lowcoder/src/comps/comps/timerComp.tsx b/client/packages/lowcoder/src/comps/comps/timerComp.tsx
index ef8575e53..b54e06ff6 100644
--- a/client/packages/lowcoder/src/comps/comps/timerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/timerComp.tsx
@@ -1,6 +1,6 @@
 import { CompAction, RecordConstructorToView, changeChildAction } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
-import { startButtonStyle, StartButtonStyleType, timerStyle, timerStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, startButtonStyle, StartButtonStyleType, timerStyle, timerStyleType } from "comps/controls/styleControlConstants";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
@@ -16,13 +16,17 @@ import { dropdownControl } from "../controls/dropdownControl";
 import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { BoolControl } from "comps/controls/boolControl";
 
-const Container = styled.div<{ $style: timerStyleType | undefined }>`
+const Container = styled.div<{
+  $style: timerStyleType | undefined;
+  $animationStyle:AnimationStyleType;
+}>`
   align-items: center;
   cursor: pointer;
   font-size: 2.9em;
   text-align: center;
   word-wrap: break-word;
   line-height: initial;
+  ${props=>props.$animationStyle}
   background-color: ${props => props.$style?.background};
  font-weight: ${props=>props?.$style?.textWeight};
 border-radius: ${props=>props?.$style?.radius};
@@ -97,6 +101,7 @@ const timerTypeOptions = [
 
 const childrenMap = {
   style: styleControl(timerStyle),
+  animationStyle: styleControl(AnimationStyle),
   startButtonStyle: styleControl(startButtonStyle),
   resetButtonStyle: styleControl(startButtonStyle),
   onEvent: eventHandlerControl(EventOptions),
@@ -191,9 +196,7 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
   }
 
   return (
-    <Container
-      $style={props.style}
-    >
+    <Container $style={props.style} $animationStyle={props.animationStyle}>
       {formatTimeDifference(elapsedTime)}
       <ButtonWarrper hidden={props.hideButton}>
         <Space>
@@ -247,6 +250,9 @@ let AvatarGroupBasicComp = (function () {
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
           </Section>
+          <Section name={sectionNames.animationStyle}>
+            {children.animationStyle.getPropertyView()}
+          </Section>
           <Section name={sectionNames.startButtonStyle}>
             {children.startButtonStyle.getPropertyView()}
           </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
index b4adf54c7..b1cedc8cc 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
@@ -1,4 +1,4 @@
-import { ContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyleType, ContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { EditorContext } from "comps/editorState";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import { HintPlaceHolder, ScrollBar } from "lowcoder-design";
@@ -24,13 +24,14 @@ const getStyle = (style: ContainerStyleType) => {
   `;
 };
 
-const Wrapper = styled.div<{ $style: ContainerStyleType }>`
+const Wrapper = styled.div<{$style: ContainerStyleType; $animationStyle?:AnimationStyleType}>`
   display: flex;
   flex-flow: column;
   height: 100%;
   border: 1px solid #d7d9e0;
   border-radius: 4px;
   ${(props) => props.$style && getStyle(props.$style)}
+  ${props=>props.$animationStyle&&props.$animationStyle}
 `;
 
 const HeaderInnerGrid = styled(InnerGrid)<{
@@ -77,10 +78,11 @@ const FooterInnerGrid = styled(InnerGrid)<{
 
 export type TriContainerProps = TriContainerViewProps & {
   hintPlaceholder?: ReactNode;
+  animationStyle?: AnimationStyleType;
 };
 
 export function TriContainer(props: TriContainerProps) {
-  const { container } = props;
+  const {container, animationStyle} = props;
   const { showHeader, showFooter } = container;
   // When the header and footer are not displayed, the body must be displayed
   const showBody = container.showBody || (!showHeader && !showFooter);
@@ -103,7 +105,7 @@ export function TriContainer(props: TriContainerProps) {
 
   return (
     <div style={{padding: style.margin, height: '100%'}}>
-    <Wrapper $style={style}>
+      <Wrapper $style={style} $animationStyle={animationStyle}>
       {showHeader && (
         <BackgroundColorContext.Provider value={headerStyle.headerBackground}>
           <HeaderInnerGrid
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
index e57a11dbf..da088d444 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
@@ -3,6 +3,7 @@ import {
   ContainerStyleType,
   heightCalculator,
   widthCalculator,
+  AnimationStyleType,
 } from "comps/controls/styleControlConstants";
 import { EditorContext } from "comps/editorState";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
@@ -67,7 +68,11 @@ const getStyle = (style: TextStyleType) => {
   `;
   }
 
-const Wrapper = styled.div<{ $style: ContainerStyleType }>`
+const Wrapper = styled.div<{
+  $style: ContainerStyleType;
+  $animationStyle?: AnimationStyleType;
+}>`
+${props=>props.$animationStyle&&props.$animationStyle}
   display: flex;
   flex-flow: column;
   height: 100%;
@@ -142,10 +147,11 @@ export type TriContainerProps = TriContainerViewProps & {
   width: string;
   style: TextStyleType;
   horizontalAlignment: string;
+  animationStyle?: AnimationStyleType;
 };
 
 export function TriContainer(props: TriContainerProps) {
-  const { container, text } = props;
+  const {container, text, animationStyle} = props;
   const { showHeader, showFooter } = container;
   // When the header and footer are not displayed, the body must be displayed
   const showBody = container.showBody || (!showHeader && !showFooter);
@@ -168,7 +174,7 @@ export function TriContainer(props: TriContainerProps) {
   } = container; 
 
   return (
-    <Wrapper $style={style}>
+    <Wrapper $style={style} $animationStyle={animationStyle}>
       {showHeader && (
         <BackgroundColorContext.Provider
           value={container.style.background}
diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
index 81a46774e..253f283ed 100644
--- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
@@ -15,7 +15,7 @@ import { AlignLeft } from "lowcoder-design";
 import { AlignRight } from "lowcoder-design";
 import { StarIcon } from "lowcoder-design";
 
-import { LabelStyleType, heightCalculator, widthCalculator } from "./styleControlConstants";
+import { AnimationStyleType, LabelStyleType, heightCalculator, widthCalculator } from "./styleControlConstants";
 
 type LabelViewProps = Pick<FormItemProps, "required" | "help" | "validateStatus"> & {
   children: ReactNode;
@@ -24,6 +24,7 @@ type LabelViewProps = Pick<FormItemProps, "required" | "help" | "validateStatus"
   field?: Record<string, string>;
   inputFieldStyle?: Record<string, string>;
   childrenInputFieldStyle?: Record<string, string>;
+  animationStyle?: Record<string, string>;
 };
 
 const StyledStarIcon = styled(StarIcon)`
@@ -44,16 +45,19 @@ function getStyle(style: any) {
   `;
 }
 
-const LabelViewWrapper = styled.div<{ $style: any, inputFieldStyle: any }>`
+const LabelViewWrapper = styled.div<{ $style: any, inputFieldStyle: any,$animationStyle:any }>`
 ${(props) => {
     return (
       props.$style && {
         ...props.$style,
         borderRadius: props.$style.radius,
+        rotate: props.$style.rotation,
+        boxShadow: `${props.$style.boxShadow} ${props.$style.boxShadowColor}`,
       }
     );
   }}
   ${(props) => props.inputFieldStyle && getStyle(props.inputFieldStyle)}
+  ${(props) => props.$animationStyle && props.$animationStyle}
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -172,7 +176,7 @@ export const LabelControl = (function () {
 
   return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => 
   {
-    return <LabelViewWrapper $style={args.style} inputFieldStyle={args.inputFieldStyle}>
+    return <LabelViewWrapper $style={args.style} inputFieldStyle={args.inputFieldStyle} $animationStyle={args.animationStyle}>
       <MainWrapper
         $position={props.position}
         $hasLabel={!!props.text}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index 0bd854ca3..fd10c7486 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -23,7 +23,13 @@ import {
   BorderStyleIcon,
   BorderRadiusIcon,
   TextStyleIcon,
-} from "lowcoder-design";
+  StarSmileIcon,
+  TimerFlashIcon,
+  Timer2Icon,
+  RefreshLineIcon,
+  ShadowIcon,
+  OpacityIcon,
+} from 'lowcoder-design';
 import { useContext } from "react";
 import styled from "styled-components";
 import { useIsMobile } from "util/hooks";
@@ -62,6 +68,13 @@ import {
   TextTransformConfig,
   TextDecorationConfig,
   borderStyleConfig,
+  BoxShadowConfig,
+  BoxShadowColorConfig,
+  AnimationIterationCountConfig,
+  OpacityConfig,
+  AnimationConfig,
+  AnimationDelayConfig,
+  AnimationDurationConfig,
 
 
 } from "./styleControlConstants";
@@ -167,6 +180,46 @@ function isMarginConfig(config: SingleColorConfig): config is MarginConfig {
   return config.hasOwnProperty("margin");
 }
 
+function isBoxShadowConfig(
+  config: SingleColorConfig
+): config is BoxShadowConfig {
+  return config.hasOwnProperty('boxShadow');
+}
+
+function isBoxShadowColorConfig(
+  config: SingleColorConfig
+): config is BoxShadowColorConfig {
+  return config.hasOwnProperty('boxShadowColor');
+}
+
+function isAnimationIterationCountConfig(
+  config: SingleColorConfig
+): config is AnimationIterationCountConfig {
+  return config.hasOwnProperty('animationIterationCount');
+}
+
+function isOpacityConfig(config: SingleColorConfig): config is OpacityConfig {
+  return config.hasOwnProperty('opacity');
+}
+
+function isAnimationConfig(
+  config: SingleColorConfig
+): config is AnimationConfig {
+  return config.hasOwnProperty('animation');
+}
+
+function isAnimationDelayConfig(
+  config: SingleColorConfig
+): config is AnimationDelayConfig {
+  return config.hasOwnProperty('animationDelay');
+}
+
+function isAnimationDurationConfig(
+  config: SingleColorConfig
+): config is AnimationDurationConfig {
+  return config.hasOwnProperty('animationDuration');
+}
+
 function isPaddingConfig(config: SingleColorConfig): config is PaddingConfig {
   return config.hasOwnProperty("padding");
 }
@@ -263,7 +316,33 @@ function isEmptyMargin(margin: string) {
 function isEmptyPadding(padding: string) {
   return _.isEmpty(padding);
 }
+function isEmptyAnimationIterationCount(animationIterationCount: string) {
+  return _.isEmpty(animationIterationCount);
+}
+
+function isEmptyOpacity(opacity: string) {
+  return _.isEmpty(opacity);
+}
+
+function isEmptyBoxShadow(boxShadow: string) {
+  return _.isEmpty(boxShadow);
+}
+
+function isEmptyBoxShadowColor(boxShadowColor: string) {
+  return _.isEmpty(boxShadowColor);
+}
+
+function isEmptyAnimation(animation: string) {
+  return _.isEmpty(animation);
+}
+
+function isEmptyAnimationDelay(animationDelay: string) {
+  return _.isEmpty(animationDelay);
+}
 
+function isEmptyAnimationDuration(animationDuration: string) {
+  return _.isEmpty(animationDuration);
+}
 /**
  * Calculate the actual used color from the dsl color
  */
@@ -387,6 +466,40 @@ function calcColors<ColorMap extends Record<string, string>>(
       res[name] = props[name];
       return;
     }
+    if (!isEmptyBoxShadow(props[name]) && isBoxShadowConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyBoxShadowColor(props[name]) && isBoxShadowColorConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (
+      !isEmptyAnimationIterationCount(props[name]) &&
+      isAnimationIterationCountConfig(config)
+    ) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyOpacity(props[name]) && isOpacityConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyAnimation(props[name]) && isAnimationConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyAnimationDelay(props[name]) && isAnimationDelayConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (
+      !isEmptyAnimationDuration(props[name]) &&
+      isAnimationDurationConfig(config)
+    ) {
+      res[name] = props[name];
+      return;
+    }
     if (!isEmptyColor(props[name])) {
       if (isThemeColorKey(props[name])) {
         res[name] = themeWithDefault[props[name]];
@@ -481,6 +594,27 @@ function calcColors<ColorMap extends Record<string, string>>(
     if (isPaddingConfig(config)) {
       res[name] = themeWithDefault[config.padding];
     }
+    if (isBoxShadowConfig(config)) {
+      res[name] = themeWithDefault[config.boxShadow] || '0px 0px 0px';
+    }
+    if (isBoxShadowColorConfig(config)) {
+      res[name] = themeWithDefault[config.boxShadowColor] || '0px 0px 0px';
+    }
+    if (isAnimationIterationCountConfig(config)) {
+      res[name] = themeWithDefault[config.animationIterationCount] || '0';
+    }
+    if (isOpacityConfig(config)) {
+      res[name] = themeWithDefault[config.opacity];
+    }
+    if (isAnimationConfig(config)) {
+      res[name] = themeWithDefault[config.animation] || 'none';
+    }
+    if (isAnimationDelayConfig(config)) {
+      res[name] = themeWithDefault[config.animationDelay] || '0s';
+    }
+    if (isAnimationDurationConfig(config)) {
+      res[name] = themeWithDefault[config.animationDuration] || '0s';
+    }
   });
   // The second pass calculates dep
   colorConfigs.forEach((config) => {
@@ -591,6 +725,46 @@ const BorderPropIcon = styled(BorderWidthIcon)` margin: 0 8px 0 -3px; padding: 3
 const BorderStylePropIcon = styled(BorderStyleIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
 
 const StyledBackgroundImageIcon = styled(ImageCompIconSmall)` margin: 0 6px 0 0; padding: 2px; color: #888`;
+const AnimationIterationCountPropIcon = styled(RefreshLineIcon)`
+  margin: 0 8px 0 -3px;
+  padding: 3px;
+  color: #888;
+`;
+
+const OpacityPropIcon = styled(OpacityIcon)`
+  margin: 0 8px 0 -3px;
+  padding: 3px;
+  color: #888;
+`;
+
+const BoxShadowColorPropIcon = styled(BorderWidthIcon)`
+  margin: 0 8px 0 -3px;
+  padding: 3px;
+  color: #888;
+`;
+
+const BoxShadowPropIcon = styled(ShadowIcon)`
+  margin: 0 8px 0 -3px;
+  padding: 3px;
+  color: #888;
+`;
+const AnimationPropIcon = styled(StarSmileIcon)`
+  margin: 0 8px 0 -3px;
+  padding: 3px;
+  color: #888;
+`;
+const AnimationDelayPropIcon = styled(TimerFlashIcon)`
+  margin: 0 8px 0 -3px;
+  padding: 3px;
+  color: #888;
+`;
+
+const AnimationDurationPropIcon = styled(Timer2Icon)`
+  margin: 0 8px 0 -3px;
+  padding: 3px;
+  color: #888;
+`;
+
 const RotationPropIcon = styled(RotationIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
 
 const StyledTextSizeIcon = styled(TextSizeIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
@@ -613,38 +787,44 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
   colorConfigs.map((config) => {
     const name: Names<T> = config.name;
     if (
-      name === "radius" ||
-      name === "borderWidth" ||
-      name === "rotation" ||
-      name === "cardRadius" ||
-      name === "textSize" ||
-      name === "textWeight" ||
-      name === "textTransform" ||
-      name === "textDecoration" ||
-      name === "fontFamily" ||
-      name === "borderStyle" ||
-      name === "fontStyle" ||
-      name === "backgroundImage" ||
-      name === "backgroundImageRepeat" ||
-      name === "backgroundImageSize" ||
-      name === "backgroundImagePosition" ||
-      name === "backgroundImageOrigin" ||
-      name === "headerBackgroundImage" ||
-      name === "headerBackgroundImageRepeat" ||
-      name === "headerBackgroundImageSize" ||
-      name === "headerBackgroundImagePosition" ||
-      name === "headerBackgroundImageOrigin" ||
-      name === "footerBackgroundImage" ||
-      name === "footerBackgroundImageRepeat" ||
-      name === "footerBackgroundImageSize" ||
-      name === "footerBackgroundImagePosition" ||
-      name === "footerBackgroundImageOrigin" ||
-      name === "margin" ||
-      name === "padding" ||
-      name === "containerHeaderPadding" ||
-      name === "containerSiderPadding" ||
-      name === "containerFooterPadding" ||
-      name === "containerBodyPadding"
+      name === 'radius' ||
+      name === 'borderWidth' ||
+      name === 'boxShadow' ||
+      name === 'animationIterationCount' ||
+      name === 'opacity' ||
+      name === 'animation' ||
+      name === 'animationDelay' ||
+      name === 'animationDuration' ||
+      name === 'rotation' ||
+      name === 'cardRadius' ||
+      name === 'textSize' ||
+      name === 'textWeight' ||
+      name === 'textTransform' ||
+      name === 'textDecoration' ||
+      name === 'fontFamily' ||
+      name === 'borderStyle' ||
+      name === 'fontStyle' ||
+      name === 'backgroundImage' ||
+      name === 'backgroundImageRepeat' ||
+      name === 'backgroundImageSize' ||
+      name === 'backgroundImagePosition' ||
+      name === 'backgroundImageOrigin' ||
+      name === 'headerBackgroundImage' ||
+      name === 'headerBackgroundImageRepeat' ||
+      name === 'headerBackgroundImageSize' ||
+      name === 'headerBackgroundImagePosition' ||
+      name === 'headerBackgroundImageOrigin' ||
+      name === 'footerBackgroundImage' ||
+      name === 'footerBackgroundImageRepeat' ||
+      name === 'footerBackgroundImageSize' ||
+      name === 'footerBackgroundImagePosition' ||
+      name === 'footerBackgroundImageOrigin' ||
+      name === 'margin' ||
+      name === 'padding' ||
+      name === 'containerHeaderPadding' ||
+      name === 'containerSiderPadding' ||
+      name === 'containerFooterPadding' ||
+      name === 'containerBodyPadding'
     ) {
       childrenMap[name] = StringControl;
     } else {
@@ -685,41 +865,50 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
                   colorConfigs.map((item) => {
                     const name: Names<T> = item.name;
                     if (
-                      name === "radius" ||
-                      name === "margin" ||
-                      name === "padding" ||
-                      name === "containerHeaderPadding" ||
-                      name === "containerSiderPadding" ||
-                      name === "containerFooterPadding" ||
-                      name === "containerBodyPadding" ||
-                      name === "borderWidth" ||
-                      name === "rotation" ||
-                      name === "backgroundImage" ||
-                      name === "backgroundImageRepeat" ||
-                      name === "backgroundImageSize" ||
-                      name === "backgroundImagePosition" ||
-                      name === "backgroundImageOrigin" ||
-                      name === "headerBackgroundImage" ||
-                      name === "headerBackgroundImageRepeat" ||
-                      name === "headerBackgroundImageSize" ||
-                      name === "headerBackgroundImagePosition" ||
-                      name === "headerBackgroundImageOrigin" ||
-                      name === "footerBackgroundImage" ||
-                      name === "footerBackgroundImageRepeat" ||
-                      name === "footerBackgroundImageSize" ||
-                      name === "footerBackgroundImagePosition" ||
-                      name === "footerBackgroundImageOrigin"
+                      name === 'radius' ||
+                      name === 'margin' ||
+                      name === 'padding' ||
+                      name === 'containerHeaderPadding' ||
+                      name === 'containerSiderPadding' ||
+                      name === 'containerFooterPadding' ||
+                      name === 'containerBodyPadding' ||
+                      name === 'borderWidth' ||
+                      name === 'animationIterationCount' ||
+                      name === 'opacity' ||
+                      name === 'boxShadowColor' ||
+                      name === 'boxShadow' ||
+                      name === 'animation' ||
+                      name === 'animationDelay' ||
+                      name === 'animationDuration' ||
+                      name === 'rotation' ||
+                      name === 'backgroundImage' ||
+                      name === 'backgroundImageRepeat' ||
+                      name === 'backgroundImageSize' ||
+                      name === 'backgroundImagePosition' ||
+                      name === 'backgroundImageOrigin' ||
+                      name === 'headerBackgroundImage' ||
+                      name === 'headerBackgroundImageRepeat' ||
+                      name === 'headerBackgroundImageSize' ||
+                      name === 'headerBackgroundImagePosition' ||
+                      name === 'headerBackgroundImageOrigin' ||
+                      name === 'footerBackgroundImage' ||
+                      name === 'footerBackgroundImageRepeat' ||
+                      name === 'footerBackgroundImageSize' ||
+                      name === 'footerBackgroundImagePosition' ||
+                      name === 'footerBackgroundImageOrigin'
                     ) {
-                      children[name]?.dispatchChangeValueAction("");
+                      children[name]?.dispatchChangeValueAction('');
                     } else {
                       children[name] &&
-                        children[name].dispatch(children[name].changeValueAction(""));
+                        children[name].dispatch(
+                          children[name].changeValueAction('')
+                        );
                     }
                   });
                 }}
               >
                 <Tooltip placement="topRight" title={trans("style.resetTooltip")}>
-                  <ResetIcon title="" />
+                  <ResetIcon title=""/>
                 </Tooltip>
               </span>
             )}
@@ -745,132 +934,312 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
                   }
                 }
                 return controlItem(
-                  { filterText: config.label },
+                  {filterText: config.label},
                   <div key={index}>
-                    {(name === "radius" ||
-                      name === "gap" ||
-                      name === "cardRadius")
+                    {name === 'radius' ||
+                    name === 'gap' ||
+                    name === 'cardRadius'
                       ? (
-                        children[name] as InstanceType<typeof StringControl>
-                      ).propertyView({
-                        label: config.label,
-                        preInputNode: <RadiusPropIcon title="Radius" />,
-                        placeholder: props[name],
-                      })
-                      : name === "borderWidth"
-                        ? (
                           children[name] as InstanceType<typeof StringControl>
                         ).propertyView({
                           label: config.label,
-                          preInputNode: <BorderPropIcon title="Border-Width" />,
+                          preInputNode: <RadiusPropIcon title="Radius" />,
                           placeholder: props[name],
-                        }) : name === "borderStyle"
-                          ? (
+                        })
+                      : name === 'borderWidth'
+                        ? (
                             children[name] as InstanceType<typeof StringControl>
                           ).propertyView({
                             label: config.label,
-                            preInputNode: <BorderStylePropIcon title="Border-Style" />,
+                            preInputNode: (
+                              <BorderPropIcon title="Border-Width" />
+                            ),
                             placeholder: props[name],
                           })
-                          : name === "margin"
-                            ? (
-                              children[name] as InstanceType<typeof StringControl>
+                        : name === 'borderStyle'
+                          ? (
+                              children[name] as InstanceType<
+                                typeof StringControl
+                              >
                             ).propertyView({
                               label: config.label,
-                              preInputNode: <MarginIcon title="Margin" />,
+                              preInputNode: (
+                                <BorderStylePropIcon title="Border-Style" />
+                              ),
                               placeholder: props[name],
                             })
-                            : name === "padding" ||
-                              name === "containerHeaderPadding" ||
-                              name === "containerSiderPadding" ||
-                              name === "containerFooterPadding" ||
-                              name === "containerBodyPadding"
-                              ? (
-                                children[name] as InstanceType<typeof StringControl>
+                          : name === 'margin'
+                            ? (
+                                children[name] as InstanceType<
+                                  typeof StringControl
+                                >
                               ).propertyView({
                                 label: config.label,
-                                preInputNode: <PaddingIcon title="Padding" />,
+                                preInputNode: <MarginIcon title="Margin" />,
                                 placeholder: props[name],
                               })
-                              : name === "textSize"
-                                ? (
-                                  children[name] as InstanceType<typeof StringControl>
+                            : name === 'animationIterationCount'
+                              ? (
+                                  children[name] as InstanceType<
+                                    typeof StringControl
+                                  >
                                 ).propertyView({
                                   label: config.label,
-                                  preInputNode: <StyledTextSizeIcon title="Font Size" />,
+                                  preInputNode: (
+                                    <AnimationIterationCountPropIcon title="AnimationIterationCount-Type" />
+                                  ),
                                   placeholder: props[name],
                                 })
-                                : name === "textWeight"
-                                  ? (
-                                    children[name] as InstanceType<typeof StringControl>
+                              : name === 'opacity'
+                                ? (
+                                    children[name] as InstanceType<
+                                      typeof StringControl
+                                    >
                                   ).propertyView({
                                     label: config.label,
-                                    preInputNode: <StyledTextWeightIcon title="Font Weight" />,
+                                    preInputNode: (
+                                      <OpacityPropIcon title="Opacity-Type" />
+                                    ),
                                     placeholder: props[name],
                                   })
-                                  : name === "fontFamily"
-                                    ? (
-                                      children[name] as InstanceType<typeof StringControl>
+                                : name === 'boxShadowColor'
+                                  ? (
+                                      children[name] as InstanceType<
+                                        typeof StringControl
+                                      >
                                     ).propertyView({
                                       label: config.label,
-                                      preInputNode: <StyledFontFamilyIcon title="Font Family" />,
+                                      preInputNode: (
+                                        <BoxShadowColorPropIcon title="BoxShadowColor-Type" />
+                                      ),
                                       placeholder: props[name],
-                                    }) : name === "textDecoration"
-                                      ? (
-                                        children[name] as InstanceType<typeof StringControl>
+                                    })
+                                : name === 'boxShadow'
+                                  ? (
+                                      children[name] as InstanceType<
+                                        typeof StringControl
+                                      >
+                                    ).propertyView({
+                                      label: config.label,
+                                      preInputNode: (
+                                        <BoxShadowPropIcon title="BoxShadow-Type" />
+                                      ),
+                                      placeholder: props[name],
+                                    })
+                                  : name === 'animation'
+                                    ? (
+                                        children[name] as InstanceType<
+                                          typeof StringControl
+                                        >
                                       ).propertyView({
                                         label: config.label,
-                                        preInputNode: <StyledTextDecorationPropIcon title="Text Decoration" />,
+                                        preInputNode: (
+                                          <AnimationPropIcon title="Animation-Type" />
+                                        ),
                                         placeholder: props[name],
-                                      }) : name === "textTransform"
-                                        ? (
-                                          children[name] as InstanceType<typeof StringControl>
+                                      })
+                                    : name === 'animationDelay'
+                                      ? (
+                                          children[name] as InstanceType<
+                                            typeof StringControl
+                                          >
                                         ).propertyView({
                                           label: config.label,
-                                          preInputNode: <StyledTextTransformIcon title="Text Transform" />,
+                                          preInputNode: (
+                                            <AnimationDelayPropIcon title="AnimationDelay-Type" />
+                                          ),
                                           placeholder: props[name],
                                         })
-                                        : name === "fontStyle"
-                                          ? (
-                                            children[name] as InstanceType<typeof StringControl>
+                                      : name === 'animationDuration'
+                                        ? (
+                                            children[name] as InstanceType<
+                                              typeof StringControl
+                                            >
                                           ).propertyView({
                                             label: config.label,
-                                            preInputNode: <StyledTextStyleIcon title="Font Style" />,
+                                            preInputNode: (
+                                              <AnimationDurationPropIcon title="AnimationDuration-Type" />
+                                            ),
                                             placeholder: props[name],
                                           })
-                                          : name === "backgroundImage" || name === "headerBackgroundImage" || name === "footerBackgroundImage"
+                                          : name === 'padding' ||
+                                              name ===
+                                                'containerHeaderPadding' ||
+                                              name ===
+                                                'containerSiderPadding' ||
+                                              name ===
+                                                'containerFooterPadding' ||
+                                              name === 'containerBodyPadding'
                                             ? (
-                                              children[name] as InstanceType<typeof StringControl>
-                                            ).propertyView({
-                                              label: config.label,
-                                              preInputNode: <StyledBackgroundImageIcon title="Background Image" />,
-                                              placeholder: props[name],
-                                            })
-                                            : name === "backgroundImageRepeat" || name === "headerBackgroundImageRepeat" || name === "footerBackgroundImageRepeat"
-                                              ? (
-                                                children[name] as InstanceType<typeof StringControl>
+                                                children[name] as InstanceType<
+                                                  typeof StringControl
+                                                >
                                               ).propertyView({
                                                 label: config.label,
-                                                preInputNode: <StyledBackgroundImageIcon title="Background Image Repeat" />,
+                                                preInputNode: (
+                                                  <PaddingIcon title="Padding" />
+                                                ),
                                                 placeholder: props[name],
                                               })
-                                              : name === "rotation"
-                                                ? (
-                                                  children[name] as InstanceType<typeof StringControl>
+                                            : name === 'textSize'
+                                              ? (
+                                                  children[
+                                                    name
+                                                  ] as InstanceType<
+                                                    typeof StringControl
+                                                  >
                                                 ).propertyView({
                                                   label: config.label,
-                                                  preInputNode: <RotationPropIcon title="Rotation" />,
+                                                  preInputNode: (
+                                                    <StyledTextSizeIcon title="Font Size" />
+                                                  ),
                                                   placeholder: props[name],
                                                 })
-                                                : children[name].propertyView({
-                                                  label: config.label,
-                                                  panelDefaultColor: props[name],
-                                                  // isDep: isDepColorConfig(config),	
-                                                  isDep: true,
-                                                  depMsg: depMsg,
-                                                })
-
-                    }
+                                              : name === 'textWeight'
+                                                ? (
+                                                    children[
+                                                      name
+                                                    ] as InstanceType<
+                                                      typeof StringControl
+                                                    >
+                                                  ).propertyView({
+                                                    label: config.label,
+                                                    preInputNode: (
+                                                      <StyledTextWeightIcon title="Font Weight" />
+                                                    ),
+                                                    placeholder: props[name],
+                                                  })
+                                                : name === 'fontFamily'
+                                                  ? (
+                                                      children[
+                                                        name
+                                                      ] as InstanceType<
+                                                        typeof StringControl
+                                                      >
+                                                    ).propertyView({
+                                                      label: config.label,
+                                                      preInputNode: (
+                                                        <StyledFontFamilyIcon title="Font Family" />
+                                                      ),
+                                                      placeholder: props[name],
+                                                    })
+                                                  : name === 'textDecoration'
+                                                    ? (
+                                                        children[
+                                                          name
+                                                        ] as InstanceType<
+                                                          typeof StringControl
+                                                        >
+                                                      ).propertyView({
+                                                        label: config.label,
+                                                        preInputNode: (
+                                                          <StyledTextDecorationPropIcon title="Text Decoration" />
+                                                        ),
+                                                        placeholder:
+                                                          props[name],
+                                                      })
+                                                    : name === 'textTransform'
+                                                      ? (
+                                                          children[
+                                                            name
+                                                          ] as InstanceType<
+                                                            typeof StringControl
+                                                          >
+                                                        ).propertyView({
+                                                          label: config.label,
+                                                          preInputNode: (
+                                                            <StyledTextTransformIcon title="Text Transform" />
+                                                          ),
+                                                          placeholder:
+                                                            props[name],
+                                                        })
+                                                      : name === 'fontStyle'
+                                                        ? (
+                                                            children[
+                                                              name
+                                                            ] as InstanceType<
+                                                              typeof StringControl
+                                                            >
+                                                          ).propertyView({
+                                                            label: config.label,
+                                                            preInputNode: (
+                                                              <StyledTextStyleIcon title="Font Style" />
+                                                            ),
+                                                            placeholder:
+                                                              props[name],
+                                                          })
+                                                        : name ===
+                                                              'backgroundImage' ||
+                                                            name ===
+                                                              'headerBackgroundImage' ||
+                                                            name ===
+                                                              'footerBackgroundImage'
+                                                          ? (
+                                                              children[
+                                                                name
+                                                              ] as InstanceType<
+                                                                typeof StringControl
+                                                              >
+                                                            ).propertyView({
+                                                              label:
+                                                                config.label,
+                                                              preInputNode: (
+                                                                <StyledBackgroundImageIcon title="Background Image" />
+                                                              ),
+                                                              placeholder:
+                                                                props[name],
+                                                            })
+                                                          : name ===
+                                                                'backgroundImageRepeat' ||
+                                                              name ===
+                                                                'headerBackgroundImageRepeat' ||
+                                                              name ===
+                                                                'footerBackgroundImageRepeat'
+                                                            ? (
+                                                                children[
+                                                                  name
+                                                                ] as InstanceType<
+                                                                  typeof StringControl
+                                                                >
+                                                              ).propertyView({
+                                                                label:
+                                                                  config.label,
+                                                                preInputNode: (
+                                                                  <StyledBackgroundImageIcon title="Background Image Repeat" />
+                                                                ),
+                                                                placeholder:
+                                                                  props[name],
+                                                              })
+                                                            : name ===
+                                                                'rotation'
+                                                              ? (
+                                                                  children[
+                                                                    name
+                                                                  ] as InstanceType<
+                                                                    typeof StringControl
+                                                                  >
+                                                                ).propertyView({
+                                                                  label:
+                                                                    config.label,
+                                                                  preInputNode:
+                                                                    (
+                                                                      <RotationPropIcon title="Rotation" />
+                                                                    ),
+                                                                  placeholder:
+                                                                    props[name],
+                                                                })
+                                                              : children[
+                                                                  name
+                                                                ].propertyView({
+                                                                  label:
+                                                                    config.label,
+                                                                  panelDefaultColor:
+                                                                    props[name],
+                                                                  // isDep: isDepColorConfig(config),
+                                                                  isDep: true,
+                                                                  depMsg:
+                                                                    depMsg,
+                                                                })}
                   </div>
                 );
               })}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index d6d072ede..f9ecfe598 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1,7 +1,7 @@
-import { ThemeDetail } from "api/commonSettingApi";
-import { darkenColor, isDarkColor, lightenColor, toHex } from "lowcoder-design";
-import { trans } from "i18n";
-import { StyleConfigType } from "./styleControl";
+import {ThemeDetail} from "api/commonSettingApi";
+import {darkenColor, isDarkColor, lightenColor, toHex} from "lowcoder-design";
+import {trans} from "i18n";
+import {StyleConfigType} from "./styleControl";
 
 type SupportPlatform = "pc" | "mobile";
 
@@ -27,29 +27,97 @@ export type RotationConfig = CommonColorConfig & {
   readonly rotation: string;
 };
 
-export type BackgroundImageConfig = CommonColorConfig & { readonly backgroundImage: string; };
-export type BackgroundImageRepeatConfig = CommonColorConfig & { readonly backgroundImageRepeat: string; };
-export type BackgroundImageSizeConfig = CommonColorConfig & { readonly backgroundImageSize: string; };
-export type BackgroundImagePositionConfig = CommonColorConfig & { readonly backgroundImagePosition: string; };
-export type BackgroundImageOriginConfig = CommonColorConfig & { readonly backgroundImageOrigin: string; };
-
-export type HeaderBackgroundImageConfig = CommonColorConfig & { readonly headerBackgroundImage: string; };
-export type HeaderBackgroundImageRepeatConfig = CommonColorConfig & { readonly headerBackgroundImageRepeat: string; };
-export type HeaderBackgroundImageSizeConfig = CommonColorConfig & { readonly headerBackgroundImageSize: string; };
-export type HeaderBackgroundImagePositionConfig = CommonColorConfig & { readonly headerBackgroundImagePosition: string; };
-export type HeaderBackgroundImageOriginConfig = CommonColorConfig & { readonly headerBackgroundImageOrigin: string; };
-
-export type SiderBackgroundImageConfig = CommonColorConfig & { readonly siderBackgroundImage: string; };
-export type SiderBackgroundImageRepeatConfig = CommonColorConfig & { readonly siderBackgroundImageRepeat: string; };
-export type SiderBackgroundImageSizeConfig = CommonColorConfig & { readonly siderBackgroundImageSize: string; };
-export type SiderBackgroundImagePositionConfig = CommonColorConfig & { readonly siderBackgroundImagePosition: string; };
-export type SiderBackgroundImageOriginConfig = CommonColorConfig & { readonly siderBackgroundImageOrigin: string; };
-
-export type FooterBackgroundImageConfig = CommonColorConfig & { readonly footerBackgroundImage: string; };
-export type FooterBackgroundImageRepeatConfig = CommonColorConfig & { readonly footerBackgroundImageRepeat: string; };
-export type FooterBackgroundImageSizeConfig = CommonColorConfig & { readonly footerBackgroundImageSize: string; };
-export type FooterBackgroundImagePositionConfig = CommonColorConfig & { readonly footerBackgroundImagePosition: string; };
-export type FooterBackgroundImageOriginConfig = CommonColorConfig & { readonly footerBackgroundImageOrigin: string; };
+export type BoxShadowConfig = CommonColorConfig & {
+  readonly boxShadow: string;
+};
+
+export type BoxShadowColorConfig = CommonColorConfig & {
+  readonly boxShadowColor: string;
+};
+
+export type AnimationIterationCountConfig = CommonColorConfig & {
+  readonly animationIterationCount: string;
+};
+
+export type OpacityConfig = CommonColorConfig & {
+  readonly opacity: string;
+};
+
+export type AnimationConfig = CommonColorConfig & {
+  readonly animation: string;
+};
+
+export type AnimationDelayConfig = CommonColorConfig & {
+  readonly animationDelay: string;
+};
+
+export type AnimationDurationConfig = CommonColorConfig & {
+  readonly animationDuration: string;
+};
+
+export type BackgroundImageConfig = CommonColorConfig & {
+  readonly backgroundImage: string;
+};
+export type BackgroundImageRepeatConfig = CommonColorConfig & {
+  readonly backgroundImageRepeat: string;
+};
+export type BackgroundImageSizeConfig = CommonColorConfig & {
+  readonly backgroundImageSize: string;
+};
+export type BackgroundImagePositionConfig = CommonColorConfig & {
+  readonly backgroundImagePosition: string;
+};
+export type BackgroundImageOriginConfig = CommonColorConfig & {
+  readonly backgroundImageOrigin: string;
+};
+
+export type HeaderBackgroundImageConfig = CommonColorConfig & {
+  readonly headerBackgroundImage: string;
+};
+export type HeaderBackgroundImageRepeatConfig = CommonColorConfig & {
+  readonly headerBackgroundImageRepeat: string;
+};
+export type HeaderBackgroundImageSizeConfig = CommonColorConfig & {
+  readonly headerBackgroundImageSize: string;
+};
+export type HeaderBackgroundImagePositionConfig = CommonColorConfig & {
+  readonly headerBackgroundImagePosition: string;
+};
+export type HeaderBackgroundImageOriginConfig = CommonColorConfig & {
+  readonly headerBackgroundImageOrigin: string;
+};
+
+export type SiderBackgroundImageConfig = CommonColorConfig & {
+  readonly siderBackgroundImage: string;
+};
+export type SiderBackgroundImageRepeatConfig = CommonColorConfig & {
+  readonly siderBackgroundImageRepeat: string;
+};
+export type SiderBackgroundImageSizeConfig = CommonColorConfig & {
+  readonly siderBackgroundImageSize: string;
+};
+export type SiderBackgroundImagePositionConfig = CommonColorConfig & {
+  readonly siderBackgroundImagePosition: string;
+};
+export type SiderBackgroundImageOriginConfig = CommonColorConfig & {
+  readonly siderBackgroundImageOrigin: string;
+};
+
+export type FooterBackgroundImageConfig = CommonColorConfig & {
+  readonly footerBackgroundImage: string;
+};
+export type FooterBackgroundImageRepeatConfig = CommonColorConfig & {
+  readonly footerBackgroundImageRepeat: string;
+};
+export type FooterBackgroundImageSizeConfig = CommonColorConfig & {
+  readonly footerBackgroundImageSize: string;
+};
+export type FooterBackgroundImagePositionConfig = CommonColorConfig & {
+  readonly footerBackgroundImagePosition: string;
+};
+export type FooterBackgroundImageOriginConfig = CommonColorConfig & {
+  readonly footerBackgroundImageOrigin: string;
+};
 
 export type TextSizeConfig = CommonColorConfig & {
   readonly textSize: string;
@@ -65,11 +133,11 @@ export type FontFamilyConfig = CommonColorConfig & {
 
 export type FontStyleConfig = CommonColorConfig & {
   readonly fontStyle: string;
-}
+};
 
 export type borderStyleConfig = CommonColorConfig & {
   readonly borderStyle: string;
-}
+};
 
 export type ContainerHeaderPaddingConfig = CommonColorConfig & {
   readonly containerHeaderPadding: string;
@@ -97,11 +165,11 @@ export type PaddingConfig = CommonColorConfig & {
 
 export type TextTransformConfig = CommonColorConfig & {
   readonly textTransform: string;
-}
+};
 
 export type TextDecorationConfig = CommonColorConfig & {
   readonly textDecoration: string;
-}
+};
 
 export type DepColorConfig = CommonColorConfig & {
   readonly depName?: string;
@@ -110,7 +178,52 @@ export type DepColorConfig = CommonColorConfig & {
   transformer: (color: string, ...rest: string[]) => string;
 };
 
-export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | RotationConfig | borderStyleConfig | BackgroundImageConfig | BackgroundImageRepeatConfig | BackgroundImageSizeConfig | BackgroundImagePositionConfig | BackgroundImageOriginConfig | TextSizeConfig | TextWeightConfig | TextTransformConfig | TextDecorationConfig | FontFamilyConfig | FontStyleConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddingConfig | ContainerSiderPaddingConfig | ContainerFooterPaddingConfig | ContainerBodyPaddingConfig | HeaderBackgroundImageConfig | HeaderBackgroundImageRepeatConfig | HeaderBackgroundImageSizeConfig | HeaderBackgroundImagePositionConfig | HeaderBackgroundImageOriginConfig | FooterBackgroundImageConfig | FooterBackgroundImageRepeatConfig | FooterBackgroundImageSizeConfig | FooterBackgroundImagePositionConfig | FooterBackgroundImageOriginConfig | SiderBackgroundImageConfig | SiderBackgroundImageRepeatConfig | SiderBackgroundImageSizeConfig | SiderBackgroundImagePositionConfig | SiderBackgroundImageOriginConfig;
+export type SingleColorConfig =
+  | SimpleColorConfig
+  | DepColorConfig
+  | RadiusConfig
+  | BorderWidthConfig
+  | RotationConfig
+  | borderStyleConfig
+  | BackgroundImageConfig
+  | BackgroundImageRepeatConfig
+  | BackgroundImageSizeConfig
+  | BackgroundImagePositionConfig
+  | BackgroundImageOriginConfig
+  | TextSizeConfig
+  | TextWeightConfig
+  | TextTransformConfig
+  | TextDecorationConfig
+  | FontFamilyConfig
+  | FontStyleConfig
+  | MarginConfig
+  | PaddingConfig
+  | ContainerHeaderPaddingConfig
+  | ContainerSiderPaddingConfig
+  | ContainerFooterPaddingConfig
+  | ContainerBodyPaddingConfig
+  | HeaderBackgroundImageConfig
+  | HeaderBackgroundImageRepeatConfig
+  | HeaderBackgroundImageSizeConfig
+  | HeaderBackgroundImagePositionConfig
+  | HeaderBackgroundImageOriginConfig
+  | FooterBackgroundImageConfig
+  | FooterBackgroundImageRepeatConfig
+  | FooterBackgroundImageSizeConfig
+  | FooterBackgroundImagePositionConfig
+  | FooterBackgroundImageOriginConfig
+  | SiderBackgroundImageConfig
+  | SiderBackgroundImageRepeatConfig
+  | SiderBackgroundImageSizeConfig
+  | SiderBackgroundImagePositionConfig
+  | SiderBackgroundImageOriginConfig
+  | AnimationConfig
+  | AnimationDelayConfig
+  | AnimationDurationConfig
+  | OpacityConfig
+  | BoxShadowConfig
+  | BoxShadowColorConfig
+  | AnimationIterationCountConfig;
 
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
@@ -123,6 +236,13 @@ export const defaultTheme: ThemeDetail = {
   padding: "3px",
   gridColumns: "24",
   textSize: "14px",
+  animation: "",
+  animationDelay: "",
+  animationDuration: "",
+  opacity: "1",
+  boxShadow: "",
+  boxShadowColor: "",
+  animationIterationCount: "",
 };
 
 export const SURFACE_COLOR = "#FFFFFF";
@@ -135,8 +255,12 @@ export enum DEP_TYPE {
   SELF = "toSelf",
 }
 
-export function contrastText(color: string, textDark: string, textLight: string) {
-  return isDarkColor(color) && color !== '#00000000' ? textLight : textDark;
+export function contrastText(
+  color: string,
+  textDark: string,
+  textLight: string
+) {
+  return isDarkColor(color) && color !== "#00000000" ? textLight : textDark;
 }
 
 // return similar background color
@@ -204,7 +328,10 @@ export function handleToHoverRow(color: string) {
 }
 
 // return table select row background color
-export function handleToSelectedRow(color: string, primary: string = defaultTheme.primary) {
+export function handleToSelectedRow(
+  color: string,
+  primary: string = defaultTheme.primary
+) {
   if (toHex(color) === SURFACE_COLOR) {
     return `${toHex(primary)?.substring(0, 7)}16`;
   } else if (isDarkColor(color)) {
@@ -262,7 +389,11 @@ export function handleToCalendarToday(color: string) {
 }
 
 // return calendar text
-function handleCalendarText(color: string, textDark: string, textLight: string) {
+function handleCalendarText(
+  color: string,
+  textDark: string,
+  textLight: string
+) {
   return isDarkColor(color) ? textLight : lightenColor(textDark, 0.1);
 }
 
@@ -313,6 +444,48 @@ const ROTATION = {
   rotation: "rotation",
 } as const;
 
+const BOXSHADOW = {
+  name: "boxShadow",
+  label: trans("style.boxShadow"),
+  boxShadow: "boxShadow",
+} as const;
+
+const BOXSHADOWCOLOR = {
+  name: "boxShadowColor",
+  label: trans("style.boxShadowColor"),
+  boxShadowColor: "boxShadowColor",
+} as const;
+
+const OPACITY = {
+  name: "opacity",
+  label: trans("style.opacity"),
+  opacity: "opacity",
+} as const;
+
+const ANIMATION = {
+  name: "animation",
+  label: trans("style.animation"),
+  animation: "animation",
+} as const;
+
+const ANIMATIONITERATIONCOUNT = {
+  name: "animationIterationCount",
+  label: trans("style.animationIterationCount"),
+  animationIterationCount: "animationIterationCount",
+} as const;
+
+const ANIMATIONDELAY = {
+  name: "animationDelay",
+  label: trans("style.animationDelay"),
+  animationDelay: "animationDelay",
+} as const;
+
+const ANIMATIONDURATION = {
+  name: "animationDuration",
+  label: trans("style.animationDuration"),
+  animationDuration: "animationDuration",
+} as const;
+
 const BORDER = {
   name: "border",
   label: trans("style.border"),
@@ -389,8 +562,8 @@ const TEXT_WEIGHT = {
 const HOVER_BACKGROUND_COLOR = {
   name: "hoverBackground",
   label: trans("style.hoverBackground"),
-  hoverBackground: "hoverBackground"
-}
+  hoverBackground: "hoverBackground",
+};
 
 const FONT_FAMILY = {
   name: "fontFamily",
@@ -402,7 +575,7 @@ const FONT_STYLE = {
   name: "fontStyle",
   label: trans("style.fontStyle"),
   fontStyle: "fontStyle",
-} as const
+} as const;
 
 const CONTAINER_HEADER_PADDING = {
   name: "containerHeaderPadding",
@@ -431,27 +604,27 @@ const CONTAINER_BODY_PADDING = {
 const TEXT_TRANSFORM = {
   name: "textTransform",
   label: trans("style.textTransform"),
-  textTransform: "textTransform"
+  textTransform: "textTransform",
 } as const;
 
 const TEXT_DECORATION = {
   name: "textDecoration",
   label: trans("style.textDecoration"),
-  textDecoration: "textDecoration"
+  textDecoration: "textDecoration",
 } as const;
 
 const BORDER_STYLE = {
   name: "borderStyle",
   label: trans("style.borderStyle"),
-  borderStyle: "borderStyle"
+  borderStyle: "borderStyle",
 } as const;
 
 const getStaticBorder = (color: string = SECOND_SURFACE_COLOR) =>
-({
-  name: "border",
-  label: trans("style.border"),
-  color,
-} as const);
+  ({
+    name: "border",
+    label: trans("style.border"),
+    color,
+  }) as const;
 
 const HEADER_BACKGROUND = {
   name: "headerBackground",
@@ -469,7 +642,11 @@ const SIDER_BACKGROUND = {
   transformer: toSelf,
 } as const;
 
-const BG_STATIC_BORDER_RADIUS = [getBackground(), getStaticBorder(), RADIUS] as const;
+const BG_STATIC_BORDER_RADIUS = [
+  getBackground(),
+  getStaticBorder(),
+  RADIUS,
+] as const;
 
 const STYLING_FIELDS_SEQUENCE = [
   MARGIN,
@@ -486,7 +663,7 @@ const STYLING_FIELDS_SEQUENCE = [
   RADIUS,
   BORDER_WIDTH,
   ROTATION,
-]
+];
 
 const STYLING_FIELDS_CONTAINER_SEQUENCE = [
   MARGIN,
@@ -495,8 +672,19 @@ const STYLING_FIELDS_CONTAINER_SEQUENCE = [
   BORDER_STYLE,
   RADIUS,
   BORDER_WIDTH,
+  OPACITY,
+  BOXSHADOW,
+  BOXSHADOWCOLOR,
+  ROTATION,
 ];
 
+export const AnimationStyle = [
+  ANIMATION,
+  ANIMATIONDELAY,
+  ANIMATIONDURATION,
+  ANIMATIONITERATIONCOUNT,
+] as const;
+
 const FILL = {
   name: "fill",
   label: trans("style.fill"),
@@ -517,15 +705,20 @@ const SUCCESS = {
   color: SUCCESS_COLOR,
 } as const;
 
-function getStaticBgBorderRadiusByBg(background: string, platform?: SupportPlatform) {
+function getStaticBgBorderRadiusByBg(
+  background: string,
+  platform?: SupportPlatform
+) {
   return [
     getStaticBackground(background),
-    platform ? { ...BORDER, platform } : BORDER,
-    platform ? { ...RADIUS, platform } : RADIUS,
+    platform ? {...BORDER, platform} : BORDER,
+    platform ? {...RADIUS, platform} : RADIUS,
   ] as const;
 }
 
-function getBgBorderRadiusByBg(background: keyof ThemeDetail = "primarySurface") {
+function getBgBorderRadiusByBg(
+  background: keyof ThemeDetail = "primarySurface"
+) {
   return [getBackground(background), BORDER, RADIUS] as const;
 }
 
@@ -547,39 +740,52 @@ function getStaticBackground(color: string) {
   } as const;
 }
 
-function replaceAndMergeMultipleStyles(originalArray: any[], styleToReplace: string, replacingStyles: any[]): any[] {
-  let temp = []
-  let foundIndex = originalArray.findIndex((element) => element.name === styleToReplace)
+function replaceAndMergeMultipleStyles(
+  originalArray: any[],
+  styleToReplace: string,
+  replacingStyles: any[]
+): any[] {
+  let temp = [];
+  let foundIndex = originalArray.findIndex(
+    (element) => element.name === styleToReplace
+  );
 
   if (foundIndex !== -1) {
-    let elementsBeforeFoundIndex = originalArray.filter((item, index) => index < foundIndex)
-    let elementsAfterFoundIndex = originalArray.filter((item, index) => index > foundIndex)
-    temp = [...elementsBeforeFoundIndex, ...replacingStyles, ...elementsAfterFoundIndex]
-  } else
-    temp = [...originalArray]
-
-  return temp
+    let elementsBeforeFoundIndex = originalArray.filter(
+      (item, index) => index < foundIndex
+    );
+    let elementsAfterFoundIndex = originalArray.filter(
+      (item, index) => index > foundIndex
+    );
+    temp = [
+      ...elementsBeforeFoundIndex,
+      ...replacingStyles,
+      ...elementsAfterFoundIndex,
+    ];
+  } else temp = [...originalArray];
+
+  return temp;
 }
 
 export const ButtonStyle = [
   getBackground(),
-  ...STYLING_FIELDS_SEQUENCE
+  ...STYLING_FIELDS_SEQUENCE,
 ] as const;
 
 export const ToggleButtonStyle = [
   getBackground("canvas"),
   ...STYLING_FIELDS_SEQUENCE.map((style) => {
-    if (style.name === 'border') {
+    if (style.name === "border") {
       return {
         ...style,
         depType: DEP_TYPE.SELF,
-        transformer: toSelf
-      }
+        transformer: toSelf,
+      };
     }
     return {
-      ...style
-    }
-  })
+      ...style,
+    };
+  }),
 ] as const;
 
 export const TextStyle = [
@@ -611,12 +817,13 @@ export const MarginStyle = [
 export const ContainerStyle = [
   // ...BG_STATIC_BORDER_RADIUS,
   getStaticBorder(),
-  // ...STYLING_FIELDS_SEQUENCE.filter((style) => style.name !== 'border'),
+  // ...STYLING_FIELDS_SEQUENCE.filter((style) => style.name !== "border"),
   getBackground(),
   RADIUS,
   BORDER_WIDTH,
   MARGIN,
   PADDING,
+  ROTATION,
   {
     name: "backgroundImage",
     label: trans("style.backgroundImage"),
@@ -647,6 +854,7 @@ export const ContainerStyle = [
 export const ContainerHeaderStyle = [
   CONTAINER_HEADER_PADDING,
   HEADER_BACKGROUND,
+  ROTATION,
   {
     name: "headerBackgroundImage",
     label: trans("style.backgroundImage"),
@@ -666,8 +874,8 @@ export const ContainerHeaderStyle = [
     name: "headerBackgroundImagePosition",
     label: trans("style.backgroundImagePosition"),
     headerBackgroundImagePosition: "headerBackgroundImagePosition",
-  }
-  , {
+  },
+  {
     name: "headerBackgroundImageOrigin",
     label: trans("style.backgroundImageOrigin"),
     headerBackgroundImageOrigin: "headerBackgroundImageOrigin",
@@ -677,6 +885,7 @@ export const ContainerHeaderStyle = [
 export const ContainerSiderStyle = [
   CONTAINER_SIDER_PADDING,
   SIDER_BACKGROUND,
+  ROTATION,
   {
     name: "siderBackgroundImage",
     label: trans("style.backgroundImage"),
@@ -696,8 +905,8 @@ export const ContainerSiderStyle = [
     name: "siderBackgroundImagePosition",
     label: trans("style.backgroundImagePosition"),
     siderBackgroundImagePosition: "siderBackgroundImagePosition",
-  }
-  , {
+  },
+  {
     name: "siderBackgroundImageOrigin",
     label: trans("style.backgroundImageOrigin"),
     siderBackgroundImageOrigin: "siderBackgroundImageOrigin",
@@ -706,6 +915,7 @@ export const ContainerSiderStyle = [
 
 export const ContainerBodyStyle = [
   CONTAINER_BODY_PADDING,
+  ROTATION,
   {
     name: "background",
     label: trans("style.background"),
@@ -768,12 +978,12 @@ export const ContainerFooterStyle = [
     name: "footerBackgroundImagePosition",
     label: trans("style.backgroundImagePosition"),
     footerBackgroundImagePosition: "footerBackgroundImagePosition",
-  }
-  , {
+  },
+  {
     name: "footerBackgroundImageOrigin",
     label: trans("style.backgroundImageOrigin"),
     footerBackgroundImageOrigin: "footerBackgroundImageOrigin",
-  }
+  },
 ] as const;
 
 export const SliderStyle = [
@@ -793,6 +1003,7 @@ export const SliderStyle = [
   TRACK,
   MARGIN,
   PADDING,
+  ROTATION,
 ] as const;
 
 export const InputLikeStyle = [
@@ -814,26 +1025,26 @@ export const AvatarStyle = [
   {
     name: "background",
     label: trans("avatarComp.avatarBackground"),
-    color: '#bfbfbf',
+    color: "#bfbfbf",
   },
   FILL,
 ] as const;
 
 export const avatarContainerStyle = [
   getStaticBackground(SURFACE_COLOR),
-  ...STYLING_FIELDS_CONTAINER_SEQUENCE
+  ...STYLING_FIELDS_CONTAINER_SEQUENCE,
 ] as const;
 
 export const avatarLabelStyle = [
   getStaticBackground(SURFACE_COLOR),
-  ...STYLING_FIELDS_SEQUENCE
+  ...STYLING_FIELDS_SEQUENCE,
 ] as const;
 
 export const avatarGroupStyle = [
   {
     name: "fill",
     label: trans("style.fill"),
-    color: '#FFFFFF',
+    color: "#FFFFFF",
   },
   getBackground("primary"),
 ] as const;
@@ -855,7 +1066,7 @@ export const FloatButtonStyle = [
 
 export const TransferStyle = [
   getStaticBackground(SURFACE_COLOR),
-  ...STYLING_FIELDS_CONTAINER_SEQUENCE
+  ...STYLING_FIELDS_CONTAINER_SEQUENCE,
 ] as const;
 
 export const CardStyle = [
@@ -873,7 +1084,7 @@ export const CardStyle = [
     transformer: toSelf,
   },
   CONTAINER_BODY_PADDING,
-  ...STYLING_FIELDS_CONTAINER_SEQUENCE
+  ...STYLING_FIELDS_CONTAINER_SEQUENCE,
 ] as const;
 
 export const CardHeaderStyle = [
@@ -883,24 +1094,28 @@ export const CardHeaderStyle = [
 
 export const timerStyle = [
   getBackground("primarySurface"),
- ...STYLING_FIELDS_SEQUENCE
+  ...STYLING_FIELDS_SEQUENCE,
 ] as const;
 
 export const startButtonStyle = [
   getBackground("primarySurface"),
-  ...STYLING_FIELDS_SEQUENCE
-] as const
+  ...STYLING_FIELDS_SEQUENCE,
+] as const;
 
 // end
 
 export const LabelStyle = [
-  ...replaceAndMergeMultipleStyles([...InputLikeStyle], 'text', [LABEL]).filter((style) => style.name !== 'radius' && style.name !== 'background')
-]
+  ...replaceAndMergeMultipleStyles([...InputLikeStyle], "text", [LABEL]).filter(
+    (style) => style.name !== "radius" && style.name !== "background"
+  ),
+];
 
 export const InputFieldStyle = [
   getStaticBackground(SURFACE_COLOR),
   getStaticBorder(),
-  ...STYLING_FIELDS_CONTAINER_SEQUENCE.filter((style) => ['border'].includes(style.name) === false),
+  ...STYLING_FIELDS_CONTAINER_SEQUENCE.filter(
+    (style) => ["border"].includes(style.name) === false
+  ),
   // ...STYLING_FIELDS_CONTAINER_SEQUENCE,
 ] as const;
 
@@ -943,12 +1158,16 @@ export const SwitchStyle = [
 ] as const;
 
 export const SelectStyle = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]),
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "border", [
+    ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
+  ]),
   ...ACCENT_VALIDATE,
 ] as const;
 
 const multiSelectCommon = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]),
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "border", [
+    ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
+  ]),
   {
     name: "tags",
     label: trans("style.tags"),
@@ -980,19 +1199,33 @@ export const MultiSelectStyle = [
 
 export const ChildrenMultiSelectStyle = [
   ...STYLING_FIELDS_SEQUENCE,
-  getStaticBackground(SURFACE_COLOR)
+  getStaticBackground(SURFACE_COLOR),
 ] as const;
 
 export const TabContainerStyle = [
   // Keep background related properties of container as STYLING_FIELDS_SEQUENCE has rest of the properties
-  ...replaceAndMergeMultipleStyles([...ContainerStyle.filter((style) => ['border', 'radius', 'borderWidth', 'margin', 'padding'].includes(style.name) === false), ...STYLING_FIELDS_SEQUENCE], 'text', [{
-    name: "tabText",
-    label: trans("style.tabText"),
-    depName: "headerBackground",
-    depType: TEXT,
-    transformer: toSelf,
-  },]),
-  ACCENT
+  ...replaceAndMergeMultipleStyles(
+    [
+      ...ContainerStyle.filter(
+        (style) =>
+          ["border", "radius", "f", "margin", "padding"].includes(
+            style.name
+          ) === false
+      ),
+      ...STYLING_FIELDS_SEQUENCE,
+    ],
+    "text",
+    [
+      {
+        name: "tabText",
+        label: trans("style.tabText"),
+        depName: "headerBackground",
+        depType: TEXT,
+        transformer: toSelf,
+      },
+    ]
+  ),
+  ACCENT,
 ] as const;
 
 export const ModalStyle = [
@@ -1004,7 +1237,7 @@ export const ModalStyle = [
   BACKGROUND_IMAGE_REPEAT,
   BACKGROUND_IMAGE_SIZE,
   BACKGROUND_IMAGE_POSITION,
-  BACKGROUND_IMAGE_ORIGIN
+  BACKGROUND_IMAGE_ORIGIN,
 ] as const;
 
 export const CascaderStyle = [
@@ -1039,7 +1272,10 @@ function checkAndUncheck() {
 }
 
 export const CheckboxStyle = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border'),
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [
+    STATIC_TEXT,
+    VALIDATE,
+  ]).filter((style) => style.name !== "border"),
   ...checkAndUncheck(),
   {
     name: "checked",
@@ -1048,11 +1284,14 @@ export const CheckboxStyle = [
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
-  HOVER_BACKGROUND_COLOR
+  HOVER_BACKGROUND_COLOR,
 ] as const;
 
 export const RadioStyle = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border' && style.name !== 'radius'),
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [
+    STATIC_TEXT,
+    VALIDATE,
+  ]).filter((style) => style.name !== "border" && style.name !== "radius"),
   ...checkAndUncheck(),
   {
     name: "checked",
@@ -1061,15 +1300,16 @@ export const RadioStyle = [
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
-  HOVER_BACKGROUND_COLOR
+  HOVER_BACKGROUND_COLOR,
 ] as const;
 
-
 export const SegmentStyle = [
   LABEL,
-  ...STYLING_FIELDS_SEQUENCE.filter((style) => ['border', 'borderWidth'].includes(style.name) === false),
+  ...STYLING_FIELDS_SEQUENCE.filter(
+    (style) => ["border", "borderWidth"].includes(style.name) === false
+  ),
   // getStaticBorder(SECOND_SURFACE_COLOR),
-    {
+  {
     name: "border",
     label: trans("style.border"),
     depName: "background",
@@ -1079,9 +1319,9 @@ export const SegmentStyle = [
     name: "borderWidth",
     label: trans("style.borderWidth"),
     borderWidth: "borderWidth",
-  }, 
- 
-  getStaticBackground(SURFACE_COLOR), 
+  },
+
+  getStaticBackground(SURFACE_COLOR),
   {
     name: "indicatorBackground",
     label: trans("style.indicatorBackground"),
@@ -1118,7 +1358,11 @@ export const StepsStyle = [
     depType: DEP_TYPE.SELF,
     transformer: contrastText,
   },
-  ...STYLING_FIELDS_SEQUENCE.filter((style) => ['background', 'textSize','textDecoration'].includes(style.name) === false),
+  ...STYLING_FIELDS_SEQUENCE.filter(
+    (style) =>
+      ["background", "textSize", "textDecoration"].includes(style.name) ===
+      false
+  ),
   getBackground(),
   {
     name: "backgroundImage",
@@ -1172,7 +1416,7 @@ const LinkTextStyle = [
 export const TableStyle = [
   MARGIN,
   PADDING,
-  BORDER_STYLE, 
+  BORDER_STYLE,
   BORDER_WIDTH,
   ...BG_STATIC_BORDER_RADIUS,
 ] as const;
@@ -1197,7 +1441,7 @@ export const TableHeaderStyle = [
   FONT_STYLE,
   TEXT,
   getStaticBackground(SURFACE_COLOR),
-  getBackground('primarySurface'),
+  getBackground("primarySurface"),
   {
     name: "headerBackground",
     label: trans("style.tableHeaderBackground"),
@@ -1253,7 +1497,7 @@ export const TableColumnStyle = [
   getStaticBackground("#00000000"),
   getStaticBorder(),
   MARGIN,
-  
+
   RADIUS,
   TEXT,
   TEXT_SIZE,
@@ -1262,14 +1506,14 @@ export const TableColumnStyle = [
   FONT_STYLE,
 ] as const;
 
-export const TableColumnLinkStyle = [
-  ...LinkTextStyle,
-] as const;
+export const TableColumnLinkStyle = [...LinkTextStyle] as const;
 
 export const FileStyle = [
   // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR),
   getStaticBackground(SURFACE_COLOR),
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [getStaticBorder('#00000000')]),
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "border", [
+    getStaticBorder("#00000000"),
+  ]),
   // TEXT, ACCENT, MARGIN, PADDING
 ] as const;
 
@@ -1279,10 +1523,17 @@ export const FileViewerStyle = [
   RADIUS,
   MARGIN,
   PADDING,
-  BORDER_WIDTH
+  BORDER_WIDTH,
 ] as const;
 
-export const IframeStyle = [getBackground(), getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, PADDING] as const;
+export const IframeStyle = [
+  getBackground(),
+  getStaticBorder("#00000000"),
+  RADIUS,
+  BORDER_WIDTH,
+  MARGIN,
+  PADDING,
+] as const;
 
 export const DateTimeStyle = [
   ...getStaticBgBorderRadiusByBg(SURFACE_COLOR),
@@ -1305,7 +1556,9 @@ function handleToHoverLink(color: string) {
 
 export const LinkStyle = [
   getBackground(),
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [...LinkTextStyle])
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [
+    ...LinkTextStyle,
+  ]),
 ] as const;
 
 export const DividerStyle = [
@@ -1315,36 +1568,45 @@ export const DividerStyle = [
     color: darkenColor(SECOND_SURFACE_COLOR, 0.1),
   }, */
   ...STYLING_FIELDS_SEQUENCE.map((style) => {
-    if (style.name === 'text') {
+    if (style.name === "text") {
       return {
         name: "text",
         label: trans("text"),
         depName: "color",
         transformer: handleToDividerText,
-      }
+      };
     }
-    return style
-  })
+    return style;
+  }),
 ] as const;
 
 // Hidden border and borderWidth properties as AntD doesnt allow these properties for progress bar
 export const ProgressStyle = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [{
-    name: "text",
-    label: trans("text"),
-    depTheme: "canvas",
-    depType: DEP_TYPE.CONTRAST_TEXT,
-    transformer: contrastText,
-  }]).filter((style) => ['border', 'borderWidth', 'textTransform', 'textDecoration'].includes(style.name) === false),
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [
+    {
+      name: "text",
+      label: trans("text"),
+      depTheme: "canvas",
+      depType: DEP_TYPE.CONTRAST_TEXT,
+      transformer: contrastText,
+    },
+  ]).filter(
+    (style) =>
+      ["border", "borderWidth", "textTransform", "textDecoration"].includes(
+        style.name
+      ) === false
+  ),
   TRACK,
   FILL,
   SUCCESS,
 ] as const;
 
-export const CircleProgressStyle = [...ProgressStyle.filter((style) => style.name !== 'radius')]
+export const CircleProgressStyle = [
+  ...ProgressStyle.filter((style) => style.name !== "radius"),
+];
 
 export const NavigationStyle = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [
     {
       name: "text",
       label: trans("text"),
@@ -1353,8 +1615,8 @@ export const NavigationStyle = [
       transformer: contrastText,
     },
     ACCENT,
-    getStaticBackground("#FFFFFF00")
-  ])
+    getStaticBackground("#FFFFFF00"),
+  ]),
   // {
   //   name: "text",
   //   label: trans("text"),
@@ -1374,7 +1636,13 @@ export const NavigationStyle = [
   // BORDER_WIDTH
 ] as const;
 
-export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, PADDING] as const;
+export const ImageStyle = [
+  getStaticBorder("#00000000"),
+  RADIUS,
+  BORDER_WIDTH,
+  MARGIN,
+  PADDING,
+] as const;
 
 export const IconStyle = [
   getStaticBackground("#00000000"),
@@ -1383,7 +1651,8 @@ export const IconStyle = [
   RADIUS,
   BORDER_WIDTH,
   MARGIN,
-  PADDING] as const;
+  PADDING,
+] as const;
 
 export const ListViewStyle = BG_STATIC_BORDER_RADIUS;
 
@@ -1400,7 +1669,7 @@ export const QRCodeStyle = [
   PADDING,
   BORDER,
   RADIUS,
-  BORDER_WIDTH
+  BORDER_WIDTH,
 ] as const;
 
 export const TimeLineStyle = [
@@ -1422,7 +1691,7 @@ export const TimeLineStyle = [
   },
   MARGIN,
   PADDING,
-  RADIUS
+  RADIUS,
 ] as const;
 
 export const TreeStyle = [
@@ -1431,15 +1700,16 @@ export const TreeStyle = [
   VALIDATE,
 ] as const;
 
-export const TreeSelectStyle = [...multiSelectCommon, ...ACCENT_VALIDATE] as const;
+export const TreeSelectStyle = [
+  ...multiSelectCommon,
+  ...ACCENT_VALIDATE,
+] as const;
 
-export const DrawerStyle = [getBackground()] as const
+export const DrawerStyle = [getBackground()] as const;
 
 export const JsonEditorStyle = [LABEL] as const;
 
-export const EchartsStyle = [
-  getBackground("primarySurface"),
-] as const;
+export const EchartsStyle = [getBackground("primarySurface")] as const;
 
 export const CalendarStyle = [
   getBackground("primarySurface"),
@@ -1504,7 +1774,7 @@ export const SignatureStyle = [
   },
   MARGIN,
   PADDING,
-  BORDER_WIDTH
+  BORDER_WIDTH,
 ] as const;
 
 // Added by Aqib Mirza
@@ -1531,7 +1801,7 @@ export const CommentStyle = [
   MARGIN,
   PADDING,
   RADIUS,
-] as const
+] as const;
 
 export const ResponsiveLayoutRowStyle = [
   ...BG_STATIC_BORDER_RADIUS,
@@ -1561,7 +1831,7 @@ export const NavLayoutStyle = [
 
 export const NavLayoutItemStyle = [
   getBackground("primarySurface"),
-  getStaticBorder('transparent'),
+  getStaticBorder("transparent"),
   RADIUS,
   {
     name: "text",
@@ -1576,7 +1846,7 @@ export const NavLayoutItemStyle = [
 
 export const NavLayoutItemHoverStyle = [
   getBackground("canvas"),
-  getStaticBorder('transparent'),
+  getStaticBorder("transparent"),
   {
     name: "text",
     label: trans("text"),
@@ -1588,7 +1858,7 @@ export const NavLayoutItemHoverStyle = [
 
 export const NavLayoutItemActiveStyle = [
   getBackground("primary"),
-  getStaticBorder('transparent'),
+  getStaticBorder("transparent"),
   {
     name: "text",
     label: trans("text"),
@@ -1604,13 +1874,15 @@ export const RichTextEditorStyle = [
   getStaticBorder(),
   getBackground("primarySurface"),
   RADIUS,
-  BORDER_WIDTH
+  BORDER_WIDTH,
 ] as const;
 
 export type QRCodeStyleType = StyleConfigType<typeof QRCodeStyle>;
 export type AvatarStyleType = StyleConfigType<typeof AvatarStyle>;
 export type AvatarLabelStyleType = StyleConfigType<typeof avatarLabelStyle>;
-export type AvatarContainerStyleType = StyleConfigType<typeof avatarContainerStyle>;
+export type AvatarContainerStyleType = StyleConfigType<
+  typeof avatarContainerStyle
+>;
 export type AvatarGroupStyleType = StyleConfigType<typeof avatarGroupStyle>;
 export type FloatButtonStyleType = StyleConfigType<typeof FloatButtonStyle>;
 export type BadgeStyleType = StyleConfigType<typeof BadgeStyle>;
@@ -1621,6 +1893,7 @@ export type timerStyleType = StyleConfigType<typeof timerStyle>;
 export type StartButtonStyleType = StyleConfigType<typeof startButtonStyle>;
 
 export type LabelStyleType = StyleConfigType<typeof LabelStyle>;
+export type AnimationStyleType = StyleConfigType<typeof AnimationStyle>;
 export type InputLikeStyleType = StyleConfigType<typeof InputLikeStyle>;
 export type InputFieldStyleType = StyleConfigType<typeof InputFieldStyle>;
 export type ColorPickerStyleType = StyleConfigType<typeof ColorPickerStyle>;
@@ -1628,16 +1901,24 @@ export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
 export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;
 export type TextStyleType = StyleConfigType<typeof TextStyle>;
 export type ContainerStyleType = StyleConfigType<typeof ContainerStyle>;
-export type ContainerHeaderStyleType = StyleConfigType<typeof ContainerHeaderStyle>;
+export type ContainerHeaderStyleType = StyleConfigType<
+  typeof ContainerHeaderStyle
+>;
 export type ContainerBodyStyleType = StyleConfigType<typeof ContainerBodyStyle>;
-export type ContainerSiderStyleType = StyleConfigType<typeof ContainerSiderStyle>;
-export type ContainerFooterStyleType = StyleConfigType<typeof ContainerFooterStyle>;
+export type ContainerSiderStyleType = StyleConfigType<
+  typeof ContainerSiderStyle
+>;
+export type ContainerFooterStyleType = StyleConfigType<
+  typeof ContainerFooterStyle
+>;
 export type SliderStyleType = StyleConfigType<typeof SliderStyle>;
 export type RatingStyleType = StyleConfigType<typeof RatingStyle>;
 export type SwitchStyleType = StyleConfigType<typeof SwitchStyle>;
 export type SelectStyleType = StyleConfigType<typeof SelectStyle>;
 export type MultiSelectStyleType = StyleConfigType<typeof MultiSelectStyle>;
-export type ChildrenMultiSelectStyleType = StyleConfigType<typeof ChildrenMultiSelectStyle>;
+export type ChildrenMultiSelectStyleType = StyleConfigType<
+  typeof ChildrenMultiSelectStyle
+>;
 export type TabContainerStyleType = StyleConfigType<typeof TabContainerStyle>;
 export type ModalStyleType = StyleConfigType<typeof ModalStyle>;
 export type CascaderStyleType = StyleConfigType<typeof CascaderStyle>;
@@ -1650,7 +1931,9 @@ export type TableHeaderStyleType = StyleConfigType<typeof TableHeaderStyle>;
 export type TableToolbarStyleType = StyleConfigType<typeof TableToolbarStyle>;
 export type TableRowStyleType = StyleConfigType<typeof TableRowStyle>;
 export type TableColumnStyleType = StyleConfigType<typeof TableColumnStyle>;
-export type TableColumnLinkStyleType = StyleConfigType<typeof TableColumnLinkStyle>;
+export type TableColumnLinkStyleType = StyleConfigType<
+  typeof TableColumnLinkStyle
+>;
 export type FileStyleType = StyleConfigType<typeof FileStyle>;
 export type FileViewerStyleType = StyleConfigType<typeof FileViewerStyle>;
 export type IframeStyleType = StyleConfigType<typeof IframeStyle>;
@@ -1663,52 +1946,71 @@ export type NavigationStyleType = StyleConfigType<typeof NavigationStyle>;
 export type ImageStyleType = StyleConfigType<typeof ImageStyle>;
 export type IconStyleType = StyleConfigType<typeof IconStyle>;
 export type ListViewStyleType = StyleConfigType<typeof ListViewStyle>;
-export type JsonSchemaFormStyleType = StyleConfigType<typeof JsonSchemaFormStyle>;
+export type JsonSchemaFormStyleType = StyleConfigType<
+  typeof JsonSchemaFormStyle
+>;
 export type TreeSelectStyleType = StyleConfigType<typeof TreeSelectStyle>;
 export type DrawerStyleType = StyleConfigType<typeof DrawerStyle>;
 export type JsonEditorStyleType = StyleConfigType<typeof JsonEditorStyle>;
 export type CalendarStyleType = StyleConfigType<typeof CalendarStyle>;
 export type SignatureStyleType = StyleConfigType<typeof SignatureStyle>;
 export type CarouselStyleType = StyleConfigType<typeof CarouselStyle>;
-export type RichTextEditorStyleType = StyleConfigType<typeof RichTextEditorStyle>;
-export type ResponsiveLayoutRowStyleType = StyleConfigType<typeof ResponsiveLayoutRowStyle>;
-export type ResponsiveLayoutColStyleType = StyleConfigType<typeof ResponsiveLayoutColStyle>;
+export type RichTextEditorStyleType = StyleConfigType<
+  typeof RichTextEditorStyle
+>;
+export type ResponsiveLayoutRowStyleType = StyleConfigType<
+  typeof ResponsiveLayoutRowStyle
+>;
+export type ResponsiveLayoutColStyleType = StyleConfigType<
+  typeof ResponsiveLayoutColStyle
+>;
 export type NavLayoutStyleType = StyleConfigType<typeof NavLayoutStyle>;
 export type NavLayoutItemStyleType = StyleConfigType<typeof NavLayoutItemStyle>;
-export type NavLayoutItemHoverStyleType = StyleConfigType<typeof NavLayoutItemHoverStyle>;
-export type NavLayoutItemActiveStyleType = StyleConfigType<typeof NavLayoutItemActiveStyle>;
+export type NavLayoutItemHoverStyleType = StyleConfigType<
+  typeof NavLayoutItemHoverStyle
+>;
+export type NavLayoutItemActiveStyleType = StyleConfigType<
+  typeof NavLayoutItemActiveStyle
+>;
 
 export function widthCalculator(margin: string) {
-  const marginArr = margin?.trim().replace(/\s+/g, ' ').split(" ") || "";
+  const marginArr = margin?.trim().replace(/\s+/g, " ").split(" ") || "";
   if (marginArr.length === 1) {
-    return `calc(100% - ${parseInt(margin.replace(/[^\d.]/g, "")) * 2 +
+    return `calc(100% - ${
+      parseInt(margin.replace(/[^\d.]/g, "")) * 2 +
       (margin.replace(/[0-9]/g, "") || "px")
-      })`;
+    })`;
   } else if (marginArr.length === 2 || marginArr.length === 3) {
-    return `calc(100% - ${parseInt(marginArr[1].replace(/[^\d.]/g, "")) * 2 +
-      (marginArr[1].replace(/[0-9]/g, "") || 'px')
-      })`;
+    return `calc(100% - ${
+      parseInt(marginArr[1].replace(/[^\d.]/g, "")) * 2 +
+      (marginArr[1].replace(/[0-9]/g, "") || "px")
+    })`;
   } else {
-    return `calc(100% - ${parseInt(marginArr[1]?.replace(/[^\d.]/g, "") || "0") +
+    return `calc(100% - ${
+      parseInt(marginArr[1]?.replace(/[^\d.]/g, "") || "0") +
       (marginArr[1]?.replace(/[0-9]/g, "") || "px")
-      } - ${parseInt(marginArr[3]?.replace(/[^\d.]/g, "") || "0") +
+    } - ${
+      parseInt(marginArr[3]?.replace(/[^\d.]/g, "") || "0") +
       (marginArr[3]?.replace(/[0-9]/g, "") || "px")
-      })`;
+    })`;
   }
 }
 
 export function heightCalculator(margin: string) {
   const marginArr = margin?.trim().split(" ") || "";
   if (marginArr.length === 1 || marginArr.length === 2) {
-    return `calc(100% - ${parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2 +
-      (marginArr[0].replace(/[0-9]/g, "") || 'px')
-      })`;
+    return `calc(100% - ${
+      parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2 +
+      (marginArr[0].replace(/[0-9]/g, "") || "px")
+    })`;
   } else if (marginArr.length > 2) {
-    return `calc(100% - ${parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") +
+    return `calc(100% - ${
+      parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") +
       (marginArr[0]?.replace(/[0-9]/g, "") || "px")
-      } - ${parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") +
+    } - ${
+      parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") +
       (marginArr[2]?.replace(/[0-9]/g, "") || "px")
-      })`;
+    })`;
   }
 }
 
@@ -1719,8 +2021,11 @@ export function marginCalculator(margin: string) {
   } else if (marginArr.length === 2) {
     return parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2;
   } else {
-    return parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") + parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0")
+    return (
+      parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") +
+      parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0")
+    );
   }
 }
 
-export type { ThemeDetail };
+export type {ThemeDetail};
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index a2879cf88..88b8c40aa 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -474,6 +474,13 @@ export const en = {
   // fourth part
 
   "style": {
+    "boxShadowColor": 'Shadow Color',
+    "boxShadow": 'Box Shadow',
+    "opacity": 'Opacity',
+    "animation": 'Animation',
+    "animationIterationCount": 'Animation Iteration Count',
+    "animationDelay": 'Animation Delay',
+    "animationDuration": 'Animation Duration',
     "resetTooltip": "Reset styles. Clear the input field to reset an individual style.",
     "textColor": "Text Color",
     "contrastText": "Contrast Text Color",
diff --git a/client/packages/lowcoder/src/index.ts b/client/packages/lowcoder/src/index.ts
index 97fc259c0..05b798a65 100644
--- a/client/packages/lowcoder/src/index.ts
+++ b/client/packages/lowcoder/src/index.ts
@@ -10,6 +10,7 @@ import { bootstrap } from "./app";
 import "./index.less";
 import log from "loglevel";
 import "antd-mobile/es/global";
+import 'animate.css';
 
 window.numbro = numbro;
 window.Papa = Papa;
diff --git a/client/yarn.lock b/client/yarn.lock
index baea75c0c..9cdf541d5 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -5848,6 +5848,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"animate.css@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "animate.css@npm:4.1.1"
+  checksum: c7eb91540423532c549725a6dedea993735a05eadaa49ed4d1965ce166a6db36459adcc9667c1dfe13657fab92a2875bbee34ad0d942444a731badab69f762c8
+  languageName: node
+  linkType: hard
+
 "ansi-escapes@npm:^4.2.1, ansi-escapes@npm:^4.3.0":
   version: 4.3.2
   resolution: "ansi-escapes@npm:4.3.2"
@@ -13739,6 +13746,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     "@types/regenerator-runtime": ^0.13.1
     "@types/uuid": ^8.3.4
     "@vitejs/plugin-react": ^2.2.0
+    animate.css: ^4.1.1
     antd: 5.13.2
     axios: ^1.6.2
     buffer: ^6.0.3
diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
new file mode 100644
index 000000000..a1d97f728
--- /dev/null
+++ b/node_modules/.yarn-integrity
@@ -0,0 +1,12 @@
+{
+  "systemParams": "darwin-x64-120",
+  "modulesFolders": [
+    "node_modules"
+  ],
+  "flags": [],
+  "linkedModules": [],
+  "topLevelPatterns": [],
+  "lockfileEntries": {},
+  "files": [],
+  "artifacts": {}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 000000000..fb57ccd13
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+