diff --git a/css/common.css b/css/common.css
index 7c5ea17..5b5f24e 100644
--- a/css/common.css
+++ b/css/common.css
@@ -212,9 +212,27 @@ body {
 }
 .my-project .my-box .contrast-box .left {
   width: 580px;
+  animation: contrastLeftShow 0.3s;
+}
+@keyframes contrastLeftShow {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 580px;
+  }
 }
 .my-project .my-box .contrast-box .left.left1 {
   width: 820px;
+  animation: contrastLeft1Show 0.3s;
+}
+@keyframes contrastLeft1Show {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 820px;
+  }
 }
 .my-project .my-box .contrast-box .left .hint {
   height: 65px;
@@ -377,7 +395,7 @@ body {
     width: 0;
   }
   100% {
-    width: 420;
+    width: 420px;
   }
 }
 .my-project .my-box .contrast-box .right .hint {
diff --git a/css/common.less b/css/common.less
index 137dce5..363697e 100644
--- a/css/common.less
+++ b/css/common.less
@@ -237,8 +237,29 @@ body {
             .left {
                 width: 580px;
 
+                animation: contrastLeftShow 0.3s;
+
+                @keyframes contrastLeftShow {
+                    0% {
+                        width: 0;
+                    }
+                    100% {
+                        width: 580px;
+                    }
+                }
+
                 &.left1 {
                     width: 820px;
+                    animation: contrastLeft1Show 0.3s;
+                }
+
+                @keyframes contrastLeft1Show {
+                    0% {
+                        width: 0;
+                    }
+                    100% {
+                        width: 820px;
+                    }
                 }
 
                 .hint {
@@ -429,7 +450,7 @@ body {
                         width: 0;
                     }
                     100% {
-                        width: 420;
+                        width: 420px;
                     }
                 }