优化动画效果

chris-peng · Apr 3, 2019 · 702f766 · 702f766
1 parent fcb675b
commit 702f766
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/index.css b/src/index.css
@@ -27,10 +27,11 @@ body {
     position: absolute;
     left: -40%;
     top: 0;
-    width: 10%;
+    width: 20%;
+    max-width: 8rem;
     height: 100%;
-    background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
-    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3));
+    background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
+    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
     z-index: 999;
 }
 
@@ -44,6 +45,16 @@ body {
     -moz-transition-delay: 0.5s;
     -o-transition-delay: 0.5s;
     -webkit-transition-delay: 0.5s;
+    animation: fadin-and-out 0.8s;
+    animation-delay: 0.5s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadin-and-out {
+    0%  {opacity: 0}
+    10% {opacity: 90}
+    70% {opacity: 100}
+    100% {opacity: 0}
 }
 
 .progress-ctn .title {

diff --git a/src/index.html b/src/index.html
@@ -18,7 +18,6 @@
         <div class="past">
             <div class="light"></div>
         </div>
-
         <div class="title">
             <span class="clear-text" contenteditable="true"></span>
         </div>