fix: add animation-fill-mode: forwards to all animation

packages/semi-foundation/button/iconButton.scss

@@ -25,6 +25,7 @@ $module: #{$prefix}-button;
                 width: 16px;
                 height: 16px;
                 animation: .6s linear infinite #{$prefix}-animation-rotate;
+                animation-fill-mode: forwards;
             }
         }
     }

packages/semi-foundation/carousel/carousel.scss

@@ -44,21 +44,25 @@ $module: #{$prefix}-carousel;
             .#{$module}-content-item-slide-out {
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-out;
+                animation-fill-mode: forwards;
             }
 
             .#{$module}-content-item-slide-in {
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-in;
+                animation-fill-mode: forwards;
             }
         }
 
         &-reverse {
             .#{$module}-content-item-slide-out {
                 animation: #{$module}-content-item-keyframe-slide-out-reverse;
+                animation-fill-mode: forwards;
             }
 
             .#{$module}-content-item-slide-in {
                 animation: #{$module}-content-item-keyframe-slide-in-reverse;
+                animation-fill-mode: forwards;
             }
         }
     }

packages/semi-foundation/modal/modal.scss

@@ -209,18 +209,22 @@ $module: #{$prefix}-modal;
 
 .#{$module}-content-animate-show {
     animation: $animation_duration-modal-show #{$module}-content-keyframe-show $animation_function-modal-show $animation_delay-modal-show forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-content-animate-hide {
     animation: $animation_duration-modal-hide #{$module}-content-keyframe-hide $animation_function-modal-hide $animation_delay-modal-hide forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-mask-animate-show {
     animation: $animation_duration-modal_mask-show #{$module}-mask-keyframe-show $animation_function-modal_mask-show $animation_delay-modal_mask-show forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-mask-animate-hide {
     animation: $animation_duration-modal_mask-hide #{$module}-mask-keyframe-hide $animation_function-modal_mask-hide $animation_delay-modal_mask-hide forwards;
+    animation-fill-mode: forwards;
 }
 
 

packages/semi-foundation/notification/notification.scss

@@ -299,53 +299,65 @@ $module: #{$prefix}-notification;
             }
         }
 
-  
+
 
         &-animation-show_top{
             animation: #{$module}-slideShow_top $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_top{
             animation: #{$module}-slideHide_top $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_topLeft{
             animation: #{$module}-slideShow_topLeft $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_topLeft{
             animation: #{$module}-slideHide_topLeft $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_topRight{
             animation: #{$module}-slideShow_topRight $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_topRight{
             animation: #{$module}-slideHide_topRight $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_bottom{
             animation: #{$module}-slideShow_bottom $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_bottom{
             animation: #{$module}-slideHide_bottom $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_bottomLeft{
             animation: #{$module}-slideShow_bottomLeft $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_bottomLeft{
             animation: #{$module}-slideHide_bottomLeft $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
         &-animation-show_bottomRight{
             animation: #{$module}-slideShow_bottomRight $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_bottomRight{
             animation: #{$module}-slideHide_bottomRight $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
     }
 }

packages/semi-foundation/popover/popover.scss

@@ -79,10 +79,12 @@ $module-icon: #{$module}-icon-arrow;
     }
     &-animation-show{
         animation: #{$module}-zoomIn $animation_duration-popover-in $animation_function-popover-in;
+        animation-fill-mode: forwards;
     }
 
     &-animation-hide{
         animation: #{$module}-zoomOut $animation_duration-popover-out $animation_function-popover-out;
+        animation-fill-mode: forwards;
     }
 }
 

packages/semi-foundation/sideSheet/sideSheet.scss

@@ -224,42 +224,52 @@ $module: #{$prefix}-sidesheet;
 
     &-animation-content_show_top{
         animation: #{$module}-slideShow_top $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_top{
         animation: #{$module}-slideHide_top $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_show_bottom{
         animation: #{$module}-slideShow_bottom $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_bottom{
         animation: #{$module}-slideHide_bottom $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_show_left{
         animation: #{$module}-slideShow_left $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_left{
         animation: #{$module}-slideHide_left $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_show_right{
         animation: #{$module}-slideShow_right $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_right{
         animation: #{$module}-slideHide_right $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-mask_show{
         animation: #{$module}-opacityShow $animation_duration-sideSheet_mask-show $animation_function-sideSheet_mask-show $animation_delay-sideSheet_mask-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-mask_hide{
         animation: #{$module}-opacityHide $animation_duration-sideSheet_mask-hide $animation_function-sideSheet_mask-hide $animation_delay-sideSheet_mask-hide;
+        animation-fill-mode: forwards;
     }
 
 }

packages/semi-foundation/skeleton/skeleton.scss

@@ -99,6 +99,7 @@ $module: #{$prefix}-skeleton;
             );
             background-size: 400% 100%;
             animation: $animation_duration-skeleton-highlight skeleton-loading $animation_function-skeleton-highlight infinite;
+            animation-fill-mode: forwards;
         }
     }
 

packages/semi-foundation/spin/spin.scss

@@ -28,6 +28,7 @@ $module: #{$prefix}-spin;
 
         & > svg {
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
+            animation-fill-mode: forwards;
             @include size($width-spin_middle);
         }
     }
@@ -35,6 +36,7 @@ $module: #{$prefix}-spin;
     &-animate {
         display: inline-flex;
         animation: $animation_duration-spin_customChildren-spin linear infinite #{$prefix}-animation-rotate;
+        animation-fill-mode: forwards;
     }
 
     &-children {

packages/semi-foundation/tabs/tabs.scss

@@ -542,16 +542,20 @@ $module: #{$prefix}-tabs;
 
     &-pane-animate-leftShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-leftShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
     &-pane-animate-rightShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-rightShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
 
     &-pane-animate-topShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-topShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
     &-pane-animate-bottomShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-bottomShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
 }
 

packages/semi-foundation/toast/toast.scss

@@ -90,10 +90,12 @@ $icon: #{$prefix}-toast-icon;
 
     &-animation-show{
         animation: $animation_duration-toast-show #{$module}-keyframe-toast-show $animation_function-toast-show $animation_delay-toast-show ;
+        animation-fill-mode: forwards;
     }
 
     &-animation-hide{
         animation: $animation_duration-toast-hide #{$module}-keyframe-toast-hide $animation_function-toast-hide $animation_delay-toast-hide ;
+        animation-fill-mode: forwards;
     }
 
     @keyframes #{$module}-keyframe-toast-show{

packages/semi-foundation/tooltip/tooltip.scss

@@ -91,10 +91,12 @@ $module-icon: #{$module}-icon-arrow;
 
     &-animation-show{
         animation: #{$module}-zoomIn $animation_duration-tooltip_in $animation_function-tooltip_in;
+        animation-fill-mode: forwards;
     }
 
     &-animation-hide{
         animation: #{$module}-zoomOut $animation_duration-tooltip_out $animation_function-tooltip_out;
+        animation-fill-mode: forwards;
     }
 
 }

packages/semi-icons/src/styles/icons.scss

@@ -32,6 +32,7 @@
 
 .#{$prefix}-icon-spinning {
     animation: $motion-icon_spin-animationDuration linear infinite #{$prefix}-icon-animation-rotate;
+    animation-fill-mode: forwards;
 }
 
 @keyframes #{$prefix}-icon-animation-rotate {