dos

Public/static/css/index.css

@@ -156,6 +156,16 @@ input::-webkit-input-placeholder {
   -webkit-animation: fadeOutLeft 1s ease-in forwards;
 }
 
+.fadeinleft {
+  animation: fadeInLeft 0.5s ease-in forwards;
+  -webkit-animation: fadeInLeft 0.5s ease-in forwards;
+}
+
+.fadeoutright {
+  animation: fadeOutRight 0.5s ease-in forwards;
+  -webkit-animation: fadeOutRight 0.5s ease-in forwards;
+}
+
 .btn-nextquestion:active {
   background: url(../image2/question-btn-next.png) top left no-repeat;
   background-size: 100%;
@@ -175,6 +185,34 @@ canvas {
   -webkit-animation: fadeInUp 0.7s ease-out backwards;
 }
 
+@-webkit-keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0)
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none
+  }
+}
+
+@keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0)
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none
+  }
+}
+
 @-webkit-keyframes fadeInUp {
   0% {
     opacity: 0;
@@ -203,6 +241,30 @@ canvas {
   }
 }
 
+@-webkit-keyframes fadeOutRight {
+  0% {
+    opacity: 1
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0)
+  }
+}
+
+@keyframes fadeOutRight {
+  0% {
+    opacity: 1
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0)
+  }
+}
+
 @-webkit-keyframes fadeOutLeft {
   0% {
     opacity: 1
@@ -227,6 +289,34 @@ canvas {
   }
 }
 
+@-webkit-keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0)
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none
+  }
+}
+
+@keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0)
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none
+  }
+}
+
 /* poster-page */
 .posterImg {
   z-index: 1;

Public/static/js/common.js

@@ -390,9 +390,9 @@ function submitAnswer() {
 function prevQuestion() {
     if (nowQuestionIndex != 1) {
         let nowIndex = nowQuestionIndex;
-        $('.question' + nowQuestionIndex + '-block').addClass('fadeoutleft');
+        $('.question' + nowQuestionIndex + '-block').addClass('fadeoutright');
         setTimeout(function () {
-            $('.question' + nowIndex + '-block').removeClass('fadeoutleft').hide();
+            $('.question' + nowIndex + '-block').removeClass('fadeoutright').hide();
         }, 1000);
         $('.btn-submit').hide();
         $('.btn-nextquestion').show();
@@ -402,7 +402,7 @@ function prevQuestion() {
             'left': '' + 5.5 * (nowQuestionIndex - 1) + 'rem'
         }, 500);
         setTimeout(function () {
-            $('.question' + nowQuestionIndex + '-block').show();
+            $('.question' + nowQuestionIndex + '-block').addClass('fadeinleft').show();
         }, 900);
     }
 }