diff --git a/WebContent/public/css/animate.css b/WebContent/public/css/animate.css
index fd737e9..4727b58 100644
--- a/WebContent/public/css/animate.css
+++ b/WebContent/public/css/animate.css
@@ -2898,249 +2898,236 @@
   }
 }
 
+/* 定义一个名为zoomInDown的关键帧动画 */
 @keyframes zoomInDown {
+  /* 动画开始时的状态 */
   from {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    opacity: 0; /* 完全透明 */
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); /* 缩小并向上移动 */
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); /* 缩小并向上移动 */
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
   }
 
+  /* 动画进行到60%时的状态 */
   60% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    opacity: 1; /* 完全不透明 */
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); /* 放大并向下移动 */
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); /* 放大并向下移动 */
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
   }
 }
 
+/* 应用zoomInDown动画的类 */
 .zoomInDown {
-  -webkit-animation-name: zoomInDown;
-  animation-name: zoomInDown;
+  -webkit-animation-name: zoomInDown; /* 使用WebKit内核的浏览器 */
+  animation-name: zoomInDown; /* 使用标准内核的浏览器 */
 }
 
+/* 定义一个名为zoomInLeft的关键帧动画（适用于WebKit内核） */
 @-webkit-keyframes zoomInLeft {
+  /* 动画开始时的状态 */
   from {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    opacity: 0; /* 完全透明 */
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); /* 缩小并向左移动 */
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); /* 缩小并向左移动 */
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
   }
 
+  /* 动画进行到60%时的状态 */
   60% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    opacity: 1; /* 完全不透明 */
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); /* 放大并向右移动 */
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); /* 放大并向右移动 */
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
   }
 }
 
+/* 定义一个名为zoomInLeft的关键帧动画（适用于标准内核） */
 @keyframes zoomInLeft {
+  /* 动画开始时的状态 */
   from {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    opacity: 0; /* 完全透明 */
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); /* 缩小并向左移动 */
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); /* 缩小并向左移动 */
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
   }
 
+  /* 动画进行到60%时的状态 */
   60% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    opacity: 1; /* 完全不透明 */
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); /* 放大并向右移动 */
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); /* 放大并向右移动 */
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
   }
 }
 
+/* 应用zoomInLeft动画的类 */
 .zoomInLeft {
-  -webkit-animation-name: zoomInLeft;
-  animation-name: zoomInLeft;
+  -webkit-animation-name: zoomInLeft; /* 使用WebKit内核的浏览器 */
+  animation-name: zoomInLeft; /* 使用标准内核的浏览器 */
 }
 
+/* 定义一个名为zoomInRight的关键帧动画（适用于WebKit内核） */
 @-webkit-keyframes zoomInRight {
+  /* 动画开始时的状态 */
   from {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    opacity: 0; /* 完全透明 */
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); /* 缩小并向右移动 */
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); /* 缩小并向右移动 */
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
   }
 
+  /* 动画进行到60%时的状态 */
   60% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    opacity: 1; /* 完全不透明 */
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); /* 放大并向左移动 */
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); /* 放大并向左移动 */
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
   }
 }
 
+/* 定义一个名为zoomInRight的关键帧动画 */
 @keyframes zoomInRight {
+  /* 动画开始时的状态 */
   from {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    opacity: 0; /* 完全透明 */
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); /* 缩小并向右移动 */
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); /* 缩小并向右移动 */
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
   }
 
+  /* 动画进行到60%时的状态 */
   60% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    opacity: 1; /* 完全不透明 */
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); /* 放大并向左移动 */
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); /* 放大并向左移动 */
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
   }
 }
 
+/* 应用zoomInRight动画的类 */
 .zoomInRight {
-  -webkit-animation-name: zoomInRight;
-  animation-name: zoomInRight;
-}
-
-@-webkit-keyframes zoomInUp {
-  from {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
+  -webkit-animation-name: zoomInRight; /* 指定动画名称 */
+  animation-name: zoomInRight; /* 指定动画名称 */
 }
 
+/* 定义一个名为zoomInUp的关键帧动画 */
 @keyframes zoomInUp {
+  /* 动画开始时的状态 */
   from {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    opacity: 0; /* 完全透明 */
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); /* 缩小并向下移动 */
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); /* 缩小并向下移动 */
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
   }
 
+  /* 动画进行到60%时的状态 */
   60% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    opacity: 1; /* 完全不透明 */
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); /* 放大并向上移动 */
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); /* 放大并向上移动 */
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
   }
 }
 
+/* 应用zoomInUp动画的类 */
 .zoomInUp {
-  -webkit-animation-name: zoomInUp;
-  animation-name: zoomInUp;
-}
-
-@-webkit-keyframes zoomOut {
-  from {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-
-  to {
-    opacity: 0;
-  }
+  -webkit-animation-name: zoomInUp; /* 指定动画名称 */
+  animation-name: zoomInUp; /* 指定动画名称 */
 }
 
+/* 定义一个名为zoomOut的关键帧动画 */
 @keyframes zoomOut {
+  /* 动画开始时的状态 */
   from {
-    opacity: 1;
+    opacity: 1; /* 完全不透明 */
   }
 
+  /* 动画进行到50%时的状态 */
   50% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
+    opacity: 0; /* 完全透明 */
+    -webkit-transform: scale3d(0.3, 0.3, 0.3); /* 缩小 */
+    transform: scale3d(0.3, 0.3, 0.3); /* 缩小 */
   }
 
+  /* 动画结束时的状态 */
   to {
-    opacity: 0;
+    opacity: 0; /* 完全透明 */
   }
 }
 
+/* 应用zoomOut动画的类 */
 .zoomOut {
-  -webkit-animation-name: zoomOut;
-  animation-name: zoomOut;
-}
-
-@-webkit-keyframes zoomOutDown {
-  40% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-
-  to {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-    -webkit-transform-origin: center bottom;
-    transform-origin: center bottom;
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
+  -webkit-animation-name: zoomOut; /* 指定动画名称 */
+  animation-name: zoomOut; /* 指定动画名称 */
 }
 
+/* 定义一个名为zoomOutDown的关键帧动画 */
 @keyframes zoomOutDown {
+  /* 动画进行到40%时的状态 */
   40% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    opacity: 1; /* 完全不透明 */
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); /* 放大并向上移动 */
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); /* 放大并向上移动 */
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */
   }
 
+  /* 动画结束时的状态 */
   to {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-    -webkit-transform-origin: center bottom;
-    transform-origin: center bottom;
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    opacity: 0; /* 完全透明 */
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); /* 缩小并向下移动 */
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); /* 缩小并向下移动 */
+    -webkit-transform-origin: center bottom; /* 变换原点在底部中心 */
+    transform-origin: center bottom; /* 变换原点在底部中心 */
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */
   }
 }
 
+/* 应用zoomOutDown动画的类 */
 .zoomOutDown {
-  -webkit-animation-name: zoomOutDown;
-  animation-name: zoomOutDown;
+  -webkit-animation-name: zoomOutDown; /* 指定动画名称 */
+  animation-name: zoomOutDown; /* 指定动画名称 */
 }
 
-@-webkit-keyframes zoomOutLeft {
+/* 定义一个名为zoomOutLeft的关键帧动画 */
+@keyframes zoomOutLeft {
+  /* 动画进行到40%时的状态 */
   40% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+    opacity: 1; /* 完全不透明 */
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); /* 放大并向右移动 */
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); /* 放大并向右移动 */
   }
 
+  /* 动画结束时的状态 */
   to {
-    opacity: 0;
-    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
-    transform: scale(0.1) translate3d(-2000px, 0, 0);
-    -webkit-transform-origin: left center;
-    transform-origin: left center;
+    opacity: 0; /* 完全透明 */
+    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); /* 缩小并向左移动 */
+    transform: scale(0.1) translate3d(-2000px, 0, 0); /* 缩小并向左移动 */
+    -webkit-transform-origin: left center; /* 变换原点在左侧中心 */
+    transform-origin: left center; /* 变换原点在左侧中心 */
   }
 }
+
+/* 应用zoomOutLeft动画的类 */
+.zoomOutLeft {
+  -webkit-animation-name: zoomOutLeft; /* 指定动画名称 */
+  animation-name: zoomOutLeft; /* 指定动画名称 */
+}
+
 /* 定义一个名为zoomOutLeft的关键帧动画 */
 @keyframes zoomOutLeft {
   /* 在动画的40%时 */