dos

Public/static/css/index.css

@@ -206,12 +206,20 @@ input::-webkit-input-placeholder {
 }
 
 .page1 .red-line-block {
-  transform: scaleX(0);
   overflow: hidden;
 }
 
-.page1 .red-line.animate,
-.page1 .red-line-block.animate {
+.page1 .red-line2 {
+  width: 0%;
+  background-size: cover;
+}
+
+.page1 .red-line2.animate {
+  animation: scale2 0.7s ease-in forwards;
+  -webkit-animation: scale2 0.7s ease-in forwards;
+}
+
+.page1 .red-line.animate {
   transform-origin: 0%;
   animation: scale 0.7s ease-in forwards;
   -webkit-animation: scale 0.7s ease-in forwards;
@@ -475,6 +483,16 @@ input::-webkit-input-placeholder {
   }
 }
 
+@keyframes scale2 {
+  0% {
+    width: 0%;
+  }
+
+  100% {
+    width: 100%;
+  }
+}
+
 /* personal-page */
 .personal-page {
   background: #e5382a;

Public/static/js/common.js

@@ -918,7 +918,7 @@ function showFlagPage() {
     if (page1Next) {
         page1Next = false;
 
-        $('.red-line,.red-line-block').addClass('animate');
+        $('.red-line,.red-line2').addClass('animate');
         setTimeout(function () {
             $('.page1').fadeOut(500);
             $('.flag-page').show();