feat: animation

packages/semi-foundation/anchor/anchor.scss

@@ -73,7 +73,7 @@ $module: #{$prefix}-anchor;
             text-overflow: ellipsis;
             white-space: nowrap;
             transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
-
+            transform: scale($transform_scale-anchor_title-text);
             &:hover {
                 color: $color-anchor_title-text-hover;
             }

packages/semi-foundation/anchor/animation.scss

@@ -2,3 +2,5 @@ $transition_duration-anchor_title-text: var(--semi-transition_dulation-faster);/
 $transition_function-anchor_title-text: var(--semi-transition_function-easeIn);//锚点标题文字-文字-过渡曲线
 $transition_delay-anchor_title-text: var(--semi-transition_delay-fastest);//锚点标题文字-文字-延迟时间
 
+//transform token
+$transform_scale-anchor_title-text: var(--semi-transform_scale-none);//锚点-放大

packages/semi-foundation/breadcrumb/animation.scss

@@ -2,3 +2,5 @@ $transition_duration-breadcrumb_link-text: var(--semi-transition_dulation-faster
 $transition_function-breadcrumb_link-text: var(--semi-transition_function-easeIn);//面包屑文字-文字-过渡曲线
 $transition_delay-breadcrumb_link-text: var(--semi-transition_delay-fastest);//面包屑文字-文字-延迟时间
 
+//transform token
+$transform_scale-breadcrumb_link-text: var(--semi-transform_scale-none);//面包屑文字-放大

packages/semi-foundation/breadcrumb/breadcrumb.scss

@@ -88,7 +88,8 @@ $module: #{$prefix}-breadcrumb;
         align-items: center;
         column-gap: 4px;
         text-decoration: inherit;
-        transition: color $transition_duration_breadcrumb_link-text $transition_function_breadcrumb_link-text $transition_delay_breadcrumb_link-text;
+        transition: color $transition_duration-breadcrumb_link-text $transition-function_breadcrumb_link-text $transition_delay-breadcrumb_link-text;
+        transform: scale($transform_scale-breadcrumb_link-text);
 
         &:hover {
             color: $color-breadcrumb_default-text-hover;

packages/semi-foundation/button/animation.scss

@@ -1,67 +1,67 @@
 $transition_duration-button_primary-bg: var(--semi-transition_dulation-faster);//主要按钮-背景色-动画持续时间
-$transition_function_button_primary-bg: var(--semi-transition_function-easeIn);//主要按钮-背景色-过渡曲线
-$transition_delay_button_primary-bg: var(--semi-transition_delay-fastest);//主要按钮-背景色-延迟时间
+$transition_function-button_primary-bg: var(--semi-transition_function-easeIn);//主要按钮-背景色-过渡曲线
+$transition_delay-button_primary-bg: var(--semi-transition_delay-fastest);//主要按钮-背景色-延迟时间
 
 
 $transition_duration-button_secondary-bg: var(--semi-transition_dulation-faster);//次要按钮-背景色-动画持续时间
-$transition_function_button_secondary-bg: var(--semi-transition_function-easeIn);//次要按钮-背景色-过渡曲线
-$transition_delay_button_secondary-bg: var(--semi-transition_delay-fastest);//次要按钮-背景色-延迟时间
+$transition_function-button_secondary-bg: var(--semi-transition_function-easeIn);//次要按钮-背景色-过渡曲线
+$transition_delay-button_secondary-bg: var(--semi-transition_delay-fastest);//次要按钮-背景色-延迟时间
 
 
 $transition_duration-button_tertiary-bg: var(--semi-transition_dulation-faster);//三级按钮-背景色-动画持续时间
-$transition_function_button_tertiary-bg: var(--semi-transition_function-easeIn);//三级按钮-背景色-过渡曲线
-$transition_delay_button_tertiary-bg: var(--semi-transition_delay-fastest);//三级按钮-背景色-延迟时间
+$transition_function-button_tertiary-bg: var(--semi-transition_function-easeIn);//三级按钮-背景色-过渡曲线
+$transition_delay-button_tertiary-bg: var(--semi-transition_delay-fastest);//三级按钮-背景色-延迟时间
 
 
 $transition_duration-button_light-bg: var(--semi-transition_dulation-faster);//浅色按钮-背景色-动画持续时间
-$transition_function_button_light-bg: var(--semi-transition_function-easeIn);//浅色按钮-背景色-过渡曲线
-$transition_delay_button_light-bg: var(--semi-transition_delay-fastest);//浅色按钮-背景色-延迟时间
+$transition_function-button_light-bg: var(--semi-transition_function-easeIn);//浅色按钮-背景色-过渡曲线
+$transition_delay-button_light-bg: var(--semi-transition_delay-fastest);//浅色按钮-背景色-延迟时间
 
 
 $transition_duration-button_warning-bg: var(--semi-transition_dulation-faster);//警告按钮-背景色-动画持续时间
-$transition_function_button_warning-bg: var(--semi-transition_function-easeIn);//警告按钮-背景色-过渡曲线
-$transition_delay_button_warning-bg: var(--semi-transition_delay-fastest);//警告按钮-背景色-延迟时间
+$transition_function-button_warning-bg: var(--semi-transition_function-easeIn);//警告按钮-背景色-过渡曲线
+$transition_delay-button_warning-bg: var(--semi-transition_delay-fastest);//警告按钮-背景色-延迟时间
 
 
 $transition_duration-button_danger-bg: var(--semi-transition_dulation-faster);//危险按钮-背景色-动画持续时间
-$transition_function_button_danger-bg: var(--semi-transition_function-easeIn);//危险按钮-背景色-过渡曲线
-$transition_delay_button_danger-bg: var(--semi-transition_delay-fastest);//危险按钮-背景色-延迟时间
+$transition_function-button_danger-bg: var(--semi-transition_function-easeIn);//危险按钮-背景色-过渡曲线
+$transition_delay-button_danger-bg: var(--semi-transition_delay-fastest);//危险按钮-背景色-延迟时间
 
 
 $transition_duration-button_borderless-bg: var(--semi-transition_dulation-faster);//无边框按钮-背景色-动画持续时间
-$transition_function_button_borderless-bg: var(--semi-transition_function-easeIn);//无边框按钮-背景色-过渡曲线
-$transition_delay_button_borderless-bg: var(--semi-transition_delay-fastest);//无边框按钮-背景色-延迟时间
+$transition_function-button_borderless-bg: var(--semi-transition_function-easeIn);//无边框按钮-背景色-过渡曲线
+$transition_delay-button_borderless-bg: var(--semi-transition_delay-fastest);//无边框按钮-背景色-延迟时间
 
 $transition_duration-button_primary-border: var(--semi-transition_dulation-faster);//主要按钮-边框-动画持续时间
-$transition_function_button_primary-border: var(--semi-transition_function-easeIn);//主要按钮-边框-过渡曲线
-$transition_delay_button_primary-border: var(--semi-transition_delay-fastest);//主要按钮-边框-延迟时间
+$transition_function-button_primary-border: var(--semi-transition_function-easeIn);//主要按钮-边框-过渡曲线
+$transition_delay-button_primary-border: var(--semi-transition_delay-fastest);//主要按钮-边框-延迟时间
 
 $transition_duration-button_secondary-border: var(--semi-transition_dulation-faster);//次要按钮-边框-动画持续时间
-$transition_function_button_secondary-border: var(--semi-transition_function-easeIn);//次要按钮-边框-过渡曲线
-$transition_delay_button_secondary-border: var(--semi-transition_delay-fastest);//次要按钮-边框-延迟时间
+$transition_function-button_secondary-border: var(--semi-transition_function-easeIn);//次要按钮-边框-过渡曲线
+$transition_delay-button_secondary-border: var(--semi-transition_delay-fastest);//次要按钮-边框-延迟时间
 
 $transition_duration-button_tertiary-border: var(--semi-transition_dulation-faster);//三级按钮-边框-动画持续时间
-$transition_function_button_tertiary-border: var(--semi-transition_function-easeIn);//三级按钮-边框-过渡曲线
-$transition_delay_button_tertiary-border: var(--semi-transition_delay-fastest);//三级按钮-边框-延迟时间
+$transition_function-button_tertiary-border: var(--semi-transition_function-easeIn);//三级按钮-边框-过渡曲线
+$transition_delay-button_tertiary-border: var(--semi-transition_delay-fastest);//三级按钮-边框-延迟时间
 
 $transition_duration-button_light-border: var(--semi-transition_dulation-faster);//浅色按钮-边框-动画持续时间
-$transition_function_button_light-border: var(--semi-transition_function-easeIn);//浅色按钮-边框-过渡曲线
-$transition_delay_button_light-border: var(--semi-transition_delay-fastest);//浅色按钮-边框-延迟时间
+$transition_function-button_light-border: var(--semi-transition_function-easeIn);//浅色按钮-边框-过渡曲线
+$transition_delay-button_light-border: var(--semi-transition_delay-fastest);//浅色按钮-边框-延迟时间
 
 $transition_duration-button_warning-border: var(--semi-transition_dulation-faster);//警告按钮-边框-动画持续时间
-$transition_function_button_warning-border: var(--semi-transition_function-easeIn);//警告按钮-边框-过渡曲线
-$transition_delay_button_warning-border: var(--semi-transition_delay-fastest);//警告按钮-边框-延迟时间
+$transition_function-button_warning-border: var(--semi-transition_function-easeIn);//警告按钮-边框-过渡曲线
+$transition_delay-button_warning-border: var(--semi-transition_delay-fastest);//警告按钮-边框-延迟时间
 
 $transition_duration-button_danger-border: var(--semi-transition_dulation-faster);//危险按钮-边框-动画持续时间
-$transition_function_button_danger-border: var(--semi-transition_function-easeIn);//危险按钮-边框-过渡曲线
-$transition_delay_button_danger-border: var(--semi-transition_delay-fastest);//危险按钮-边框-延迟时间
+$transition_function-button_danger-border: var(--semi-transition_function-easeIn);//危险按钮-边框-过渡曲线
+$transition_delay-button_danger-border: var(--semi-transition_delay-fastest);//危险按钮-边框-延迟时间
 
 //transform token
 
-$transform_scale-button_primary: var(--semi-transform_scale-small);//主要按钮-放大
-$transform_scale-button_secondary: var(--semi-transform_scale-small);//次要按钮-放大
-$transform_scale-button_tertiary: var(--semi-transform_scale-small);//三级按钮-放大
-$transform_scale-button_light: var(--semi-transform_scale-small);//浅色按钮-放大
-$transform_scale-button_warning: var(--semi-transform_scale-small);//警告按钮-放大
-$transform_scale-button_danger: var(--semi-transform_scale-small);//危险按钮-放大
-$transform_scale-button_borderless: var(--semi-transform_scale-small);//无边框按钮-放大
+$transform_scale-button_primary: var(--semi-transform_scale-none);//主要按钮-放大
+$transform_scale-button_secondary: var(--semi-transform_scale-none);//次要按钮-放大
+$transform_scale-button_tertiary: var(--semi-transform_scale-none);//三级按钮-放大
+$transform_scale-button_light: var(--semi-transform_scale-none);//浅色按钮-放大
+$transform_scale-button_warning: var(--semi-transform_scale-none);//警告按钮-放大
+$transform_scale-button_danger: var(--semi-transform_scale-none);//危险按钮-放大
+$transform_scale-button_borderless: var(--semi-transform_scale-none);//无边框按钮-放大

packages/semi-foundation/button/button.scss

@@ -40,8 +40,8 @@ $module: #{$prefix}-button;
     &-danger {
         background-color: $color-button_danger-bg-default;
         color: $color-button_danger-text-default;
-      transition: background-color $transition_duration-button_danger-bg $transition_function_button_danger-bg $transition_delay_button_danger-bg,
-      border $transition_duration-button_danger-border $transition_function_button_danger-border $transition_delay_button_danger-border;
+      transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
+      border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
       transform: scale(var($transform-scale-button_danger));
 
 
@@ -62,9 +62,9 @@ $module: #{$prefix}-button;
     &-warning {
         background-color: $color-button_warning-bg-default;
         color: $color-button_warning-text-default;
-      transition: background-color $transition_duration-button_warning-bg $transition_function_button_warning-bg $transition_delay_button_warning-bg,
-      border $transition_duration-button_warning-border $transition_function_button_warning-border $transition_delay_button_warning-border;
-      transform:scale(var($transform_scale_button_warning));
+      transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
+      border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
+      transform:scale(var($transform_scale-button_warning));
 
       &:hover {
             background-color: $color-button_warning-bg-hover;
@@ -83,8 +83,8 @@ $module: #{$prefix}-button;
     &-tertiary {
         background-color: $color-button_tertiary-bg-default;
         color: $color-button_tertiary-text-default;
-      transition: background-color $transition_duration-button_tertiary-bg $transition_function_button_tertiary-bg $transition_delay_button_tertiary-bg,
-      border $transition_duration-button_tertiary-border $transition_function_button_tertiary-border $transition_delay_button_tertiary-border;
+      transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
+      border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
       transform:scale(var($transform_scale_button_tertiary));
 
       &:hover {
@@ -101,9 +101,9 @@ $module: #{$prefix}-button;
     &-primary {
         background-color: $color-button_primary-bg-default;
         color: $color-button_primary-text-default;
-        transition: background-color $transition_duration-button_primary-bg $transition_function_button_primary-bg $transition_delay_button_primary-bg,
-        border $transition_duration-button_primary-border $transition_function_button_primary-border $transition_delay_button_primary-border;;
-      transform:scale(var($transform_scale_button_primary));
+        transition: background-color $transition_duration-button_primary-bg $transition_function-button_primary-bg $transition_delay-button_primary-bg,
+        border $transition_duration-button_primary-border $transition_function-button_primary-border $transition_delay-button_primary-border;;
+      transform:scale(var($transform_scale-button_primary));
 
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             background-color: $color-button_primary-bg-hover;
@@ -121,9 +121,9 @@ $module: #{$prefix}-button;
         background-color: $color-button_secondary-bg-default;
         outline-color: $color-button_secondary-border-default;
         color: $color-button_secondary-text-default;
-      transition: background-color $transition_duration-button_secondary-bg $transition_function_button_secondary-bg $transition_delay_button_secondary-bg,
-      border $transition_duration-button_secondary-border $transition_function_button_secondary-border $transition_delay_button_secondary-border;
-      transform:scale(var($transform_scale_button_secondary));
+      transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
+      border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
+      transform:scale(var($transform_scale-button_secondary));
 
       &:hover {
             background-color: $color-button_secondary-bg-hover;
@@ -154,8 +154,8 @@ $module: #{$prefix}-button;
     &-borderless {
         background-color: transparent;
         border: $width-button_borderless-border $color-button_borderless-border-default solid;
-      transition:background-color $transition_duration-button_borderless-bg $transition_function_button_borderless-bg $transition_delay_button_borderless-bg;
-      transform:scale(var($transform_scale_button_borderless));
+      transition:background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
+      transform:scale(var($transform_scale-button_borderless));
 
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_borderless-bg-hover;
@@ -170,9 +170,9 @@ $module: #{$prefix}-button;
     &-light {
         background-color: $color-button_light-bg-default;
         border: $width-button_light-border $color-button_light-border-default solid;
-      transition: background-color $transition_duration-button_light-bg $transition_function_button_light-bg $transition_delay_button_light-bg，
-      border $transition_duration-button_light-border $transition_function_button_light-border $transition_delay_button_light-border;
-      transform:scale(var($transform_scale_button_light));
+      transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg，
+      border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
+      transform:scale(var($transform_scale-button_light));
 
       &:not(.#{$module}-disabled):hover {
             background-color: $color-button_light-bg-hover;

packages/semi-foundation/cascader/animation.scss

@@ -1,4 +1,4 @@
 $transition_duration-cascader_option-bg: var(--semi-transition_dulation-faster);//级联选项-背景色-动画持续时间
-$transition_function-cascader_default-bg: var(--semi-transition_function-easeIn);//级联选项-背景色-过渡曲线
-$transition_delay-cascader_default-bg: var(--semi-transition_delay-fastest);//级联选项-背景色-延迟时间
+$transition_function-cascader_option-bg: var(--semi-transition_function-easeIn);//级联选项-背景色-过渡曲线
+$transition_delay-cascader_option-bg: var(--semi-transition_delay-fastest);//级联选项-背景色-延迟时间
 

packages/semi-foundation/cascader/cascader.scss

@@ -380,7 +380,7 @@ $module: #{$prefix}-cascader;
         align-items: center;
         justify-content: space-between;
         cursor: pointer;
-        transition: background-color $transition_duration-cascader_option-bg $transition_function-cascader_default-bg $transition_delay-cascader_default-bg;
+        transition: background-color $transition_duration-cascader_option-bg $transition_function-cascader_option-bg $transition_delay-cascader_option-bg;
 
         @include font-size-regular;
         min-width: min-content;

packages/semi-foundation/checkbox/animation.scss

@@ -7,4 +7,4 @@ $transition_function-checkbox-border: var(--semi-transition_function-easeIn);//
 $transition_delay-checkbox-border: var(--semi-transition_delay-fastest);//复选框-边框-延迟时间
 
 // transform token
-$transform_scale-checkbox: var(--semi-transform_scale-small);//复选框-放大
+$transform_scale-checkbox: var(--semi-transform_scale-none);//复选框-放大

packages/semi-foundation/checkbox/checkbox.scss

@@ -16,6 +16,7 @@ $module: #{$prefix}-checkbox;
     cursor: pointer;
     transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,
     border $transition_duration-checkbox-border $transition_function_checkbox-border $transition_delay-checkbox-border;
+    transform: scale($transform_scale-checkbox);
 
     input[type="checkbox"] {
         position: absolute;

packages/semi-foundation/input/animation.scss

@@ -1,11 +1,14 @@
-$transition_duration_input-bg: var(--semi-transition_dulation-faster);//输入框-背景色-动画持续时间
-$transition_function_input-bg: var(--semi-transition_function-easeIn);//输入框-背景色-过渡曲线
-$transition_delay_input-bg: var(--semi-transition_delay-fastest);//输入框-背景色-延迟时间
+$transition_duration-input-bg: var(--semi-transition_dulation-faster);//输入框-背景色-动画持续时间
+$transition_function-input-bg: var(--semi-transition_function-easeIn);//输入框-背景色-过渡曲线
+$transition_delay-input-bg: var(--semi-transition_delay-fastest);//输入框-背景色-延迟时间
 
-$transition_duration_input-border: var(--semi-transition_dulation-faster);//输入框-边框-动画持续时间
-$transition_function_input-border: var(--semi-transition_function-easeIn);//输入框-边框-过渡曲线
-$transition_delay_input-border: var(--semi-transition_delay-fastest);//输入框-边框-延迟时间
+$transition_duration-input-border: var(--semi-transition_dulation-faster);//输入框-边框-动画持续时间
+$transition_function-input-border: var(--semi-transition_function-easeIn);//输入框-边框-过渡曲线
+$transition_delay-input-border: var(--semi-transition_delay-fastest);//输入框-边框-延迟时间
 
-$transition_duration_input-text: var(--semi-transition_dulation-faster);//输入框-文字或图标-动画持续时间
-$transition_function_input-text: var(--semi-transition_function-easeIn);//输入框-文字或图标-过渡曲线
-$transition_delay_input-text: var(--semi-transition_delay-fastest);//输入框-文字或图标-延迟时间
+$transition_duration-input-text: var(--semi-transition_dulation-faster);//输入框-文字或图标-动画持续时间
+$transition_function-input-text: var(--semi-transition_function-easeIn);//输入框-文字或图标-过渡曲线
+$transition_delay-input-text: var(--semi-transition_delay-fastest);//输入框-文字或图标-延迟时间
+
+// transform token
+$transform_scale-input: var(--semi-transform_scale-none);//输入框-变大

packages/semi-foundation/input/input.scss

@@ -43,6 +43,8 @@ $module: #{$prefix}-input;
     transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
      border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
 
+    transform: scale($transform_scale-input);
+
     &-default {
         height: $height-input_wrapper_default;
         @include font-size-regular;

packages/semi-foundation/input/textarea.scss

@@ -12,8 +12,8 @@ $module: #{$prefix}-input;
     border-radius: $radius-input_wrapper;
     vertical-align: bottom;
     background-color: $color-input_default-bg-default;
-    transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,
-    border $transition_duration-checkbox-border $transition_function-checkbox-border $transition_delay-checkbox-border;
+    transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
+    border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
 
     &:hover {
         background-color: $color-input_default-bg-hover;

packages/semi-foundation/inputNumber/animation.scss

@@ -1,8 +1,10 @@
-$transition_duration_inputNumber-bg: var(--semi-transition_dulation-faster);//数字输入框-背景色-动画持续时间
-$transition_function_inputNumber-bg: var(--semi-transition_function-easeIn);//数字输入框-背景色-过渡曲线
-$transition_delay_inputNumber-bg: var(--semi-transition_delay-fastest);//数字输入框-背景色-延迟时间
+$transition_duration-inputNumber-bg: var(--semi-transition_dulation-faster);//数字输入框-背景色-动画持续时间
+$transition_function-inputNumber-bg: var(--semi-transition_function-easeIn);//数字输入框-背景色-过渡曲线
+$transition_delay-inputNumber-bg: var(--semi-transition_delay-fastest);//数字输入框-背景色-延迟时间
 
-$transition_duration_inputNumber-border: var(--semi-transition_dulation-faster);//数字输入框-边框-动画持续时间
-$transition_function_inputNumber-border: var(--semi-transition_function-easeIn);//数字输入框-边框-过渡曲线
-$transition_delay_inputNumber-border: var(--semi-transition_delay-fastest);//数字输入框-边框-延迟时间
+$transition_duration-inputNumber-border: var(--semi-transition_dulation-faster);//数字输入框-边框-动画持续时间
+$transition_function-inputNumber-border: var(--semi-transition_function-easeIn);//数字输入框-边框-过渡曲线
+$transition_delay-inputNumber-border: var(--semi-transition_delay-fastest);//数字输入框-边框-延迟时间
 
+// transform token
+$transform_scale-inputNumber: var(--semi-transform_scale-none);//数字输入框-变大

packages/semi-foundation/inputNumber/inputNumber.scss

@@ -7,8 +7,9 @@ $module: #{$prefix}-input-number;
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
-    transition: background-color $transition_duration_inputNumber-bg $transition_function-inputNumber-bg $transition_delay-inputNumber-bg,
+    transition: background-color $transition_duration-inputNumber-bg $transition_function-inputNumber-bg $transition_delay-inputNumber-bg,
     border $transition_duration-inputNumber-border $transition_function-inputNumber-border $transition_delay-inputNumber-border;
+    transform: scale($transform_scale-inputNumber);
 
     &-suffix-btns {
         display: inline-flex;

packages/semi-foundation/navigation/navigation.scss

@@ -82,7 +82,7 @@ $module: #{$prefix}-navigation;
         color: $color-navigation_itemL1-text-default;
         width: 100%;
 
-        transition: background-color $transition_function_navigation_itemL1-bg $transition_function_navigation_itemL1-bg $transition_delay_navigation_itemL1-bg;//nav item的bg transition
+        transition: background-color $transition_function-navigation_itemL1-bg $transition_function-navigation_itemL1-bg $transition_delay-navigation_itemL1-bg;//nav item的bg transition
 
         &-text {
             overflow: hidden;

packages/semi-foundation/pagination/animation.scss

@@ -6,3 +6,6 @@ $transition_duration-pagination_item-text: var(--semi-transition_dulation-faster
 $transition_function-pagination_item-text: var(--semi-transition_function-easeIn);//翻页器页码文本-背景色-过渡曲线
 $transition_delay-pagination_item-text: var(--semi-transition_delay-fastest);//翻页器页码文本-背景色-延迟时间
 
+//transform token
+
+$transform_scale-pagination_item: var(--semi-transform_scale-none);//翻页器item-放大

packages/semi-foundation/pagination/pagination.scss

@@ -36,8 +36,9 @@ $module: #{$prefix}-page;
         display: flex;
         align-items: center;
         justify-content: center;
-        transition: background-color $transition_duration-pagination_item-bg $transition_function-pagination_item-bg $transition_delay_pagination_item-bg，
-        color $transition_duration_pagination_item-text $transition_function_pagination_item-text $transition_delay-pagination_item-text;
+        transition: background-color $transition_duration-pagination_item-bg $transition_function-pagination_item-bg $transition_delay-pagination_item-bg，
+        color $transition_duration-pagination_item-text $transition_function-pagination_item-text $transition_delay-pagination_item-text;
+        transform:scale($transform_scale-pagination_item);
 
         &:hover {
             border-color: $color-pagination_item-border-hover;

packages/semi-foundation/radio/animation.scss

@@ -1,8 +1,10 @@
-$transition_duration_radio-bg: var(--semi-transition_dulation-faster);//单选框-背景色-动画持续时间
-$transition_function_radio-bg: var(--semi-transition_function-easeIn);//单选框-背景色-过渡曲线
-$transition_delay_radio-bg: var(--semi-transition_delay-fastest);//单选框-背景色-延迟时间
+$transition_duration-radio-bg: var(--semi-transition_dulation-faster);//单选框-背景色-动画持续时间
+$transition_function-radio-bg: var(--semi-transition_function-easeIn);//单选框-背景色-过渡曲线
+$transition_delay-radio-bg: var(--semi-transition_delay-fastest);//单选框-背景色-延迟时间
 
-$transition_duration_radio-border: var(--semi-transition_dulation-faster);//单选框-边框-动画持续时间
-$transition_function_radio-border: var(--semi-transition_function-easeIn);//单选框-边框-过渡曲线
-$transition_delay_radio-border: var(--semi-transition_delay-fastest);//单选框-边框-延迟时间
+$transition_duration-radio-border: var(--semi-transition_dulation-faster);//单选框-边框-动画持续时间
+$transition_function-radio-border: var(--semi-transition_function-easeIn);//单选框-边框-过渡曲线
+$transition_delay-radio-border: var(--semi-transition_delay-fastest);//单选框-边框-延迟时间
 
+// transform token
+$transform_scale-radio: var(--semi-transform_scale-none);//单选框-变大

packages/semi-foundation/radio/radio.scss

@@ -266,7 +266,7 @@ $inner-width: $width-icon-medium;
             color: $color-radio_buttonRadio-text-default;
             font-size: $font-radio_buttonRadio_middle-default-size;
             padding: $spacing-radio_addon_buttonRadio_middle-paddingY $spacing-radio_addon_buttonRadio_middle-paddingX;
-            transition: background-color $transition_duration_radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
+            transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
             border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
             &-hover {

packages/semi-foundation/rating/animation.scss

@@ -1,4 +1,6 @@
-$transition_duration_rating-bg: var(--semi-transition_dulation-faster);//评分-背景色-动画持续时间
-$transition_function_rating-bg: var(--semi-transition_function-easeIn);//评分-背景色-过渡曲线
-$transition_delay_rating-bg: var(--semi-transition_delay-fastest);//评分-背景色-延迟时间
+$transition_duration-rating-bg: var(--semi-transition_dulation-faster);//评分-背景色-动画持续时间
+$transition_function-rating-bg: var(--semi-transition_function-easeIn);//评分-背景色-过渡曲线
+$transition_delay-rating-bg: var(--semi-transition_delay-fastest);//评分-背景色-延迟时间
 
+// transform token
+$transform_scale-rating: var(--semi-transform_scale-none);//评分-变大

packages/semi-foundation/rating/rating.scss

@@ -37,6 +37,7 @@ $module: #{$prefix}-rating;
         color: inherit;
         cursor: pointer;
         transition: all 0.5s;
+        transform:scale($transform-scale-rating);
 
         &:not(:last-child) {
             margin-right: $spacing-rating_item-marginRight;

packages/semi-foundation/select/animation.scss

@@ -1,8 +1,15 @@
-$transition_duration_select-bg: var(--semi-transition_dulation-faster);//选择器-背景色-动画持续时间
-$transition_function_select-bg: var(--semi-transition_function-easeIn);//选择器-背景色-过渡曲线
-$transition_delay_select-bg: var(--semi-transition_delay-fastest);//选择器-背景色-延迟时间
+$transition_duration-select-bg: var(--semi-transition_dulation-faster);//选择器-背景色-动画持续时间
+$transition_function-select-bg: var(--semi-transition_function-easeIn);//选择器-背景色-过渡曲线
+$transition_delay-select-bg: var(--semi-transition_delay-fastest);//选择器-背景色-延迟时间
 
-$transition_duration_select-border: var(--semi-transition_dulation-faster);//选择器-边框-动画持续时间
-$transition_function_select-border: var(--semi-transition_function-easeIn);//选择器-边框-过渡曲线
-$transition_delay_select-border: var(--semi-transition_delay-fastest);//选择器-边框-延迟时间
+$transition_duration-select-border: var(--semi-transition_dulation-faster);//选择器-边框-动画持续时间
+$transition_function-select-border: var(--semi-transition_function-easeIn);//选择器-边框-过渡曲线
+$transition_delay-select-border: var(--semi-transition_delay-fastest);//选择器-边框-延迟时间
 
+$transition_duration-select_option-bg: var(--semi-transition_dulation-faster);//选择器-选项-动画持续时间
+$transition_function-select_option-bg: var(--semi-transition_function-easeIn);//选择器-选项-过渡曲线
+$transition_delay-select_option-bg: var(--semi-transition_delay-fastest);//选择器-选项-延迟时间
+
+// transform token
+$transform_scale-select: var(--semi-transform_scale-none);//选择框-变大
+$transform_rotate-select-arrow: var(--semi-transform-rotate-none);//选择框-箭头-旋转

packages/semi-foundation/select/option.scss

@@ -20,6 +20,7 @@ $multiple: #{$module}-multiple;
     align-items: center;
     cursor: pointer;
     box-sizing: border-box;
+    transition: background-color $transition_duration-select_option-bg $transition_function-select_option-bg $transition_delay-select_option-bg;
 
     &-icon {
         width: $width-select_option_tick;

packages/semi-foundation/select/select.scss

@@ -21,8 +21,9 @@ $multiple: #{$module}-multiple;
     position: relative;
     outline: none;
     cursor: pointer;
-    transition: background-color $transition_duration_select-bg $transition_function_select-bg $transition_delay_select-bg,
-    border $transition_duration_select-border $transition_function_select-border $transition_delay_select-border;
+    transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg,
+    border $transition_duration-select-border $transition_function-select-border $transition_delay-select-border;
+    transform:scale($transform_scale-select);
     &:hover {
         background-color: $color-select-bg-hover;
         border: $width-select-border-hover solid $color-select-border-hover;
@@ -257,6 +258,8 @@ $multiple: #{$module}-multiple;
         width: $width-select_arrow;
         color: $color-select-icon-default;
         flex-shrink: 0;
+        transform: rotate($transform_rotate-select-arrow);
+
 
         &-empty {
             // 不显示arrow时，右侧留出12px空白

packages/semi-foundation/slider/animation.scss

@@ -1,4 +1,7 @@
-$transition_duration_handle-bg: var(--semi-transition_dulation-faster);//滑动条圆形按钮-背景色-动画持续时间
-$transition_function_handle-bg: var(--semi-transition_function-easeIn);//滑动条圆形按钮-背景色-过渡曲线
-$transition_delay_handle-bg: var(--semi-transition_delay-fastest);//滑动条圆形按钮-背景色-延迟时间
+$transition_duration-slider_handle-bg: var(--semi-transition_dulation-faster);//滑动条圆形按钮-背景色-动画持续时间
+$transition_function-slider_handle-bg: var(--semi-transition_function-easeIn);//滑动条圆形按钮-背景色-过渡曲线
+$transition_delay-slider_handle-bg: var(--semi-transition_delay-fastest);//滑动条圆形按钮-背景色-延迟时间
 
+//transform token
+
+$transform_scale-slider_handle: var(--semi-transform_scale-small);//滑动条圆形按钮-放大

packages/semi-foundation/slider/slider.scss

@@ -54,7 +54,8 @@ $module: #{$prefix}-slider;
         border: none;
         border-radius: 50%;
         cursor: pointer;
-        transition: #fff .3s;
+        transition: background-color $transition_duration_slider_handle-bg $transition_function-slider-handle-bg $transition_delay-slider_handle-bg;
+        transform: scale($transform_scale-slider_handle);
     }
 
     &-handle:hover {

packages/semi-foundation/steps/animation.scss

@@ -1,4 +1,7 @@
-$transition_duration_steps_item_title-text: var(--semi-transition_dulation-faster);//步骤条标题文字-背景色-动画持续时间
-$transition_function_steps_item_title-text: var(--semi-transition_function-easeIn);//步骤条标题文字-背景色-过渡曲线
-$transition_delay_steps_item_title-text: var(--semi-transition_delay-fastest);//步骤条标题文字-背景色-延迟时间
+$transition_duration-steps_item_title-text: var(--semi-transition_dulation-faster);//步骤条标题文字-背景色-动画持续时间
+$transition_function-steps_item_title-text: var(--semi-transition_function-easeIn);//步骤条标题文字-背景色-过渡曲线
+$transition_delay-steps_item_title-text: var(--semi-transition_delay-fastest);//步骤条标题文字-背景色-延迟时间
 
+//transform token
+
+$transform_scale-step-item: var(--semi-transform_scale-small);//步骤条item-放大

packages/semi-foundation/steps/bacisSteps.scss

@@ -167,6 +167,7 @@ $basicType: #{$module}-basic;
         flex: 1;
         cursor: pointer;
         transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text; //step文字color的transition变化
+        transform:scale($transform_scale-step-item);
 
         &:hover {
 

packages/semi-foundation/steps/fillSteps.scss

@@ -39,6 +39,8 @@ $module: #{$prefix}-steps;
         border: $width-steps_item-border solid $color-steps-border-default;
         border-radius: $radius-steps_item;
         padding: $spacing-steps_item-paddingY $spacing-steps_item-paddingX;
+        transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text; // item 字体颜色动效
+        transform:scale($transform_scale-step-item);
 
         .#{$module}-item-title {
             position: relative;

packages/semi-foundation/switch/animation.scss

@@ -1,4 +1,4 @@
-$transition_duration_switch-bg: var(--semi-transition_dulation-faster);//开关-背景色-动画持续时间
-$transition_function_switch-bg: var(--semi-transition_function-easeIn);//开关-背景色-过渡曲线
-$transition_delay_switch-bg: var(--semi-transition_delay-fastest);//开关-背景色-延迟时间
+$transition_duration-switch-bg: var(--semi-transition_dulation-faster);//开关-背景色-动画持续时间
+$transition_function-switch-bg: var(--semi-transition_function-easeIn);//开关-背景色-过渡曲线
+$transition_delay-switch-bg: var(--semi-transition_delay-fastest);//开关-背景色-延迟时间
 

packages/semi-foundation/tabs/animation.scss

@@ -1,19 +1,23 @@
-$transition_duration_tabs_tab_line-border: var(--semi-transition_dulation-faster);//线条式页签标示线-边框-动画持续时间
-$transition_function_tabs_tab_line-border: var(--semi-transition_function-easeIn);//线条式页签标示线-边框-过渡曲线
-$transition_delay_tabs_tab_line-border: var(--semi-transition_delay-fastest);//线条式页签标示线-边框-延迟时间
+$transition_duration-tabs_tab_line-border: var(--semi-transition_dulation-faster);//线条式标签页标示线-边框-动画持续时间
+$transition_function-tabs_tab_line-border: var(--semi-transition_function-easeIn);//线条式标签页标示线-边框-过渡曲线
+$transition_delay-tabs_tab_line-border: var(--semi-transition_delay-fastest);//线条式标签页标示线-边框-延迟时间
 
-$transition_duration_tabs_tab_line-text: var(--semi-transition_dulation-faster);//线条式页签-文字-动画持续时间
-$transition_function_tabs_tab_line-text: var(--semi-transition_function-easeIn);//线条式页签-文字-过渡曲线
-$transition_delay_tabs_tab_line-text: var(--semi-transition_delay-fastest);//线条式页签-文字-延迟时间
+$transition_duration-tabs_tab_line-text: var(--semi-transition_dulation-faster);//线条式标签页-文字-动画持续时间
+$transition_function-tabs_tab_line-text: var(--semi-transition_function-easeIn);//线条式标签页-文字-过渡曲线
+$transition_delay-tabs_tab_line-text: var(--semi-transition_delay-fastest);//线条式标签页-文字-延迟时间
 
 
-$transition_duration_tabs_tab_button-bg: var(--semi-transition_dulation-faster);//按钮式页签-背景色-动画持续时间
-$transition_function_tabs_tab_button-bg: var(--semi-transition_function-easeIn);//按钮式页签-背景色-过渡曲线
-$transition_delay_tabs_tab_button-bg: var(--semi-transition_delay-fastest);//按钮式页签-背景色-延迟时间
+$transition_duration-tabs_tab_button-bg: var(--semi-transition_dulation-faster);//按钮式标签页-背景色-动画持续时间
+$transition_function-tabs_tab_button-bg: var(--semi-transition_function-easeIn);//按钮式标签页-背景色-过渡曲线
+$transition_delay-tabs_tab_button-bg: var(--semi-transition_delay-fastest);//按钮式标签页-背景色-延迟时间
 
 
-$transition_duration_tabs_tab_card-bg: var(--semi-transition_dulation-faster);//卡片式页签文字-背景色-动画持续时间
-$transition_function_tabs_tab_card-bg: var(--semi-transition_function-easeIn);//卡片式页签文字-背景色-过渡曲线
-$transition_delay_tabs_tab_card-bg: var(--semi-transition_delay-fastest);//卡片式页签文字-背景色-延迟时间
+$transition_duration-tabs_tab_card-bg: var(--semi-transition_dulation-faster);//卡片式标签页文字-背景色-动画持续时间
+$transition_function-tabs_tab_card-bg: var(--semi-transition_function-easeIn);//卡片式标签页文字-背景色-过渡曲线
+$transition_delay-tabs_tab_card-bg: var(--semi-transition_delay-fastest);//卡片式标签页文字-背景色-延迟时间
 
+//transform token
 
+$transform_scale-tabs_tab_line-item: var(--semi-transform_scale-none);//线条式标签页item 放大
+$transform_scale-tabs_tab_button-item: var(--semi-transform_scale-none);//按钮式标签页item 放大
+$transform_scale-tabs_tab_card-item: var(--semi-transform_scale-none);//线条式标签页item 放大

packages/semi-foundation/tabs/tabs.scss

@@ -156,8 +156,9 @@ $module: #{$prefix}-tabs;
     &-bar-line {
         &.#{$module}-bar-top {
             border-bottom: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
-            transition: border-bottom-color $transition_duration_tabs_tab_line-border $transition_function_tabs_tab_line-border $transition_delay_tabs_tab_line-border,
-            color $transition_duration_tabs_tab_line-text $transition_function_tabs_tab_line-text $transition_delay_tabs_tab_line-text;//线条式tabs的border-color以及color的transition
+            transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
+            color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的border-color以及color的transition
+            transform:scale($transform_scale-tabs_tab_line-item);
             
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
@@ -340,7 +341,8 @@ $module: #{$prefix}-tabs;
         
         .#{$module}-tab {
             padding: $spacing-tabs_bar_card_tab-paddingY $spacing-tabs_bar_card_tab-paddingX;
-            transition: background-color $transition_duration_tabs_tab_card-bg $transition_function_tabs_tab_card-bg $transition_delay_tabs_tab_card-bg; //卡片式tabs的bg的transition
+            transition: background-color $transition_duration-tabs_tab_card-bg $transition_function-tabs_tab_card-bg $transition_delay-tabs_tab_card-bg; //卡片式tabs的bg的transition
+            transform:scale($transform_scale-tabs_tab_card-item);
             
             &:hover {
                 background: $color-tabs_tab_card-bg-hover;
@@ -383,7 +385,8 @@ $module: #{$prefix}-tabs;
             border-radius: $radius-tabs_tab_button;
             color: $color-tabs_tab_button-text-default;
             border: none;
-            transition: background-color $transition_duration_tabs-tab_button-bg $transition_function_tabs_tab_button-bg $transition_delay_tabs_tab_button-bg;//按钮tabs的背景色的transition
+            transition: background-color $transition_duration-tabs-tab_button-bg $transition_function-tabs_tab_button-bg $transition_delay-tabs_tab_button-bg;//按钮tabs的背景色的transition
+            transform:scale($transform_scale-tabs_tab_button-item);
             
             &:hover {
                 border: none;

packages/semi-foundation/tagInput/animation.scss

@@ -1,7 +1,7 @@
-$transition_duration_tagInput-bg: var(--semi-transition_dulation-faster);//标签输入框-背景色-动画持续时间
-$transition_function_tagInput-bg: var(--semi-transition_function-easeIn);//标签输入框-背景色-过渡曲线
-$transition_delay_tagInput-bg: var(--semi-transition_delay-fastest);//标签输入框-背景色-延迟时间
+$transition_duration-tagInput-bg: var(--semi-transition_dulation-faster);//标签输入框-背景色-动画持续时间
+$transition_function-tagInput-bg: var(--semi-transition_function-easeIn);//标签输入框-背景色-过渡曲线
+$transition_delay-tagInput-bg: var(--semi-transition_delay-fastest);//标签输入框-背景色-延迟时间
 
-$transition_duration_tagInput-border: var(--semi-transition_dulation-faster);//标签输入框-边框-动画持续时间
-$transition_function_tagInput-border: var(--semi-transition_function-easeIn);//标签输入框-边框-过渡曲线
-$transition_delay_tagInput-border: var(--semi-transition_delay-fastest);//标签输入框-边框-延迟时间
+$transition_duration-tagInput-border: var(--semi-transition_dulation-faster);//标签输入框-边框-动画持续时间
+$transition_function-tagInput-border: var(--semi-transition_function-easeIn);//标签输入框-边框-过渡曲线
+$transition_delay-tagInput-border: var(--semi-transition_delay-fastest);//标签输入框-边框-延迟时间

packages/semi-foundation/tagInput/tagInput.scss

@@ -10,7 +10,7 @@ $module: #{$prefix}-tagInput;
     font-weight: $font-weight-regular;
     width: 100%;
     box-sizing: border-box;
-    transition: background-color $transition_duration_tagInput-bg $transition_function-tagInput-bg $transition_delay-tagInput-bg,
+    transition: background-color $transition_duration-tagInput-bg $transition_function-tagInput-bg $transition_delay-tagInput-bg,
     border $transition_duration-tagInput-border $transition_function-tagInput-border $transition_delay-tagInput-border;
 
 

packages/semi-foundation/timePicker/utils/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-timePicker-bg: var(--semi-transition_dulation-faster);//标签输入框-背景色-动画持续时间
+$transition_function-tagInput-bg: var(--semi-transition_function-easeIn);//标签输入框-背景色-过渡曲线
+$transition_delay-tagInput-bg: var(--semi-transition_delay-fastest);//标签输入框-背景色-延迟时间
+
+$transition_duration-tagInput-border: var(--semi-transition_dulation-faster);//标签输入框-边框-动画持续时间
+$transition_function-tagInput-border: var(--semi-transition_function-easeIn);//标签输入框-边框-过渡曲线
+$transition_delay-tagInput-border: var(--semi-transition_delay-fastest);//标签输入框-边框-延迟时间

packages/semi-foundation/tree/animation.scss

@@ -1,3 +1,7 @@
-$transition_duration_tree_option-bg: var(--semi-transition_dulation-faster);//树选项-背景色-动画持续时间
-$transition_function_tree_option-bg: var(--semi-transition_function-easeIn);//树选项-背景色-过渡曲线
-$transition_delay_tree_option-bg: var(--semi-transition_delay-fastest);//树选项-背景色-延迟时间
+$transition_duration-tree_option-bg: var(--semi-transition_dulation-faster);//树选项-背景色-动画持续时间
+$transition_function-tree_option-bg: var(--semi-transition_function-easeIn);//树选项-背景色-过渡曲线
+$transition_delay-tree_option-bg: var(--semi-transition_delay-fastest);//树选项-背景色-延迟时间
+
+//transform token
+
+$transform_scale-tree-option: var(--semi-transform_scale-none);//树选项-放大

packages/semi-foundation/tree/tree.scss

@@ -53,7 +53,8 @@ $module: #{$prefix}-tree;
         display: flex;
         align-items: center;
         cursor: pointer;
-        transition: background-color $transition_duration_tree_option-bg $transition_function-tree_option-bg $transition_delay-tree_option-bg;
+        transition: background-color $transition_duration-tree_option-bg $transition_function-tree_option-bg $transition_delay-tree_option-bg;
+        transform:scale($transform_scale-tree-option);
 
         @include font-size-regular;
         word-break: break-word;

packages/semi-theme-default/scss/animation.scss

@@ -21,9 +21,12 @@ body{
   --semi-transition_delay-faster:0ms;
   --semi-transition_delay-fastest:0ms;
 
+  --semi-transform_scale-none:scale(1,1);
   --semi-transform_scale-small:scale(1.04,1.04);
   --semi-transform_scale-medium:scale(1.08,1.08);
   --semi-transform_scale-large:scale(1.12,1.12);
+
+  --semi-transform-rotate-none:rotate(0deg);
   --semi-transform_rotate-clockwise90deg:rotate(90deg);
   --semi-transform_rotate-clockwise180deg:rotate(180deg);
   --semi-transform_rotate-clockwise270deg:rotate(270deg);