update: プログレスバーなどを隠すスタイルとアニメーションを適用

public/index.html

@@ -67,6 +67,8 @@ Designed by yuki540.
           </div>
           <div id="progress-bar"><div></div></div>
         </section>
+        <section class="illust"></section>
+        <section class="paints"></section>
       </section>
     </main>
     <script type="text/javascript" src="./scripts/app.min.js"></script>

src/scss/keyframes/pc/load-view.scss

@@ -204,3 +204,54 @@
   75%  { opacity: 1; transform: scale(1.2) rotate(-45deg); }
   100% { opacity: 1; transform: scale(1.4) rotate(-45deg); }
 }
+
+
+/*** hidden-block ***/
+@keyframes load-view__hidden-block {
+  0%   { transform: scale(1) rotate(45deg); opacity: 1; }
+  35%  { transform: scale(1.2) rotate(45deg); opacity: 1; }
+  100% { transform: scale(0.5) rotate(45deg); opacity: 0; }
+}
+
+/*** hidden-progress-bar ***/
+@keyframes load-view__hidden-progress-bar {
+  0%   { width: calc(100% - 200px); opacity: 1; }
+  80%  { opacity: 1; }
+  100% { width: 0; opacity: 0; }
+}
+
+
+/*** show-illust ***/
+@keyframes load-view__show-illust {
+  0%   { opacity: 0; transform: translateX(60px); }
+  100% { opacity: 1; transform: translateX(0%); }
+}
+
+/*** hidden-illust ***/
+@keyframes load-view__hidden-illust {
+  0%   { opacity: 1; }
+  30%  { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+/*** attack-illust ***/
+@keyframes load-view__attack-illust {
+  0%   { transform: translateY(0px); }
+  30%  { transform: translateY(0px); }
+  70%  { transform: translateY(-60px); }
+  100% { transform: translateY(0px); }
+}
+
+/*** attack-effect ***/
+@keyframes load-view__attack-effect {
+  0%   { opacity: 0; transform: scale(0.5); }
+  50%  { opacity: 1; }
+  100% { opacity: 0; transform: scale(2.4); }
+}
+
+/*** fail-paint ***/
+@keyframes load-view___fail-paint {
+  0%   { top: -120px; left: calc(50% - 30px); width: 60px; height: 60px; border-radius: 50%; }
+  30%  { top: calc(50% - 30px); left: calc(50% - 30px); width: 60px; height: 60px; border-radius: 50%; }
+  100% { top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; }
+}

src/scss/modules/pc/load-view.scss

@@ -358,6 +358,7 @@
         }
         .block:nth-child(7) {
           top: 0; left: 600px;
+          div { border-color: $theme-purple; }
           &::after { background-image: url(../images/load-view/charcters/char-7.png); }
         }
 
@@ -403,7 +404,7 @@
       /*** progress-bar ***/
       #progress-bar {
         position: absolute;
-        bottom: 20px; left: 100px;
+        bottom: 20px; right: 100px;
         width: calc(100% - 200px); height: 30px;
         border: solid 3px #fff;
         box-sizing: border-box;
@@ -418,9 +419,105 @@
         }
       }
     }
+
+    /**
+     * illust
+     */
+    .illust {
+      position: absolute;
+      bottom: 0; right: 0;
+      width: 300px; height: 400px;
+      z-index: 3;
+
+      &::after,
+      &::before {
+        content: "";
+        display: block;
+        position: absolute;
+      }
+      &::after {
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+        background-image: url(../images/load-view/illust.png);
+        background-size: 100%;
+        opacity: 0;
+      }
+      &::before {
+        position: absolute;
+        bottom: -50px; left: 100px;
+        width: 100px; height: 100px;
+        border-radius: 50%;
+        background-color: rgba(0,200,255,0.7);
+        opacity: 0;
+      }
+    }
+
+    /**
+     * paints
+     */
+    .paints {
+      position: absolute;
+      top: 60px; left: 60px;
+      width: calc(100% - 120px); height: calc(100% - 120px);
+      border-radius: 10px;
+      z-index: 2;
+
+      &::before,
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        left: calc(50% - 30px); top: -120px;
+        width: 60px; height: 60px;
+        border-radius: 50%;
+      }
+      &::before { background-color: $theme-purple; }
+      &::after  { background-color: $theme-light-pink; }
+    }
   }
 
   #load-view[data-state="fin"] {
+    /**
+     * frame
+     */
+    .frame {
+      .direction { animation: fadeout 0.7s ease 1s forwards; }
+      .rect      { animation: fadeout 0.7s ease 1s forwards; }
+    }
 
+    /**
+     * display
+     */
+    .display {
+      /*** blocks ***/
+      .blocks {
+        .block[data-state="true"] {
+          opacity: 1;
+          animation: load-view__hidden-block 0.6s ease 1s forwards;
+        }
+      }
+      #progress-bar { animation: load-view__hidden-progress-bar 0.35s ease 1s forwards; }
+    }
+
+    /**
+     * illust
+     */
+    .illust {
+      &::after {
+        animation:
+          load-view__show-illust 1s ease 1s forwards,
+          load-view__attack-illust 0.5s ease 2s forwards,
+          load-view__hidden-illust 1s ease 2.5s forwards;
+      }
+      &::before { animation: load-view__attack-effect 0.5s ease 2.4s forwards; }
+    }
+
+    /**
+     * paints
+     */
+    .paints {
+      &::before { animation: load-view___fail-paint 0.75s ease 2.6s forwards; }
+      &::after  { animation: load-view___fail-paint 0.75s ease 2.8s forwards; }
+    }
   }
 }