update: キャラクターパネルにスタイルを適用

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

@@ -6,3 +6,42 @@
   from { transform: scale(5) rotate(0deg); }
   to   { transform: scale(1) rotate(360deg); }
 }
+
+@keyframes load-view__show-poster {
+  from { transform: translateY(calc(-100% + -200px)); }
+  to   { transform: translateY(0); }
+}
+
+@keyframes load-view__fall-ball {
+  0%   { transform: translateY(calc(-50% + -25px)); }
+  40%  { transform: translateY(calc(50% - 25px)); }
+  100% { transform: translateY(0); }
+}
+@keyframes load-view__scale-ball {
+  0% {
+    width: 50px; height: 50px; border-radius: 50%;
+    top: calc(50% - 25px); left: calc(50% - 25px);
+  }
+  50% {
+    width: calc(100% - 10px); height: 650px; border-radius: 0%;
+    top: calc(50% - 325px); left: 5px;
+  }
+  100% {
+    width: calc(100% - 10px); height: 0; border-radius: 0%;
+    top: calc(50% - 325px); left: 5px;
+  }
+}
+
+@keyframes load-view__sway-illust {
+  from { transform: rotate(-2deg); }
+  to   { transform: rotate(2deg); }
+}
+@keyframes load-view__rotate-illust {
+  from { transform: rotateY(0deg); }
+  to   { transform: rotateY(480deg); }
+}
+
+@keyframes load-view__move-paint-ball {
+  from { left: -60px; transform: rotate(0deg); }
+  to   { left: calc(100% + 60px); transform: rotate(1440deg); }
+}

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

@@ -5,6 +5,7 @@
     width: 100%; height: 100%;
     min-width: $min-width; min-height: $min-height;
     background-color: $theme-pink;
+    overflow: hidden;
   }
 
   /**
@@ -191,7 +192,129 @@
     .icon { background-image: url(../images/load-view/wait/4.png); }
   }
 
-  /* animation *********************************************************************************/
+  /*** poster ***/
+  .load-view__body__poster {
+    position: absolute;
+    top: 0; left: calc(50% - 450px);
+    width: 900px; height: 100%;
+    overflow: hidden;
+
+    .paint-ball {
+      position: absolute;
+      top: calc(50% - 30px); left: -60px;
+      width: 60px; height: 60px;
+      border-radius: 50%;
+      background-color: #fff;
+
+      div {
+        position: absolute;
+        top: 5px; left: 5px;
+        width: calc(100% - 10px); height: calc(100% - 10px);
+        border-radius: 50%;
+        border: dashed 2px $theme-pink;
+        box-sizing: border-box;
+      }
+
+      &::before,
+      &::after {
+        position: absolute;
+        content: ""; display: block;
+        width: calc(100% - 40px); height: 2px;
+        top: calc(50% - 1px); left: 20px;
+        background-color: $theme-pink;
+      }
+      &::before { transform: rotate(45deg); }
+      &::after  { transform: rotate(-45deg); }
+    }
+
+    .poster {
+      position: relative;
+      float: left;
+      width: 225px; height: 100%;
+      transform: translateY(calc(-100% + -200px));
+      perspective: 500px;
+    
+      .illust {
+        position: absolute;
+        top: calc(50% - 325px); left: 0;
+        width: 225px; height: 650px;
+        transform-origin: center bottom;
+        opacity: 0;
+        
+        &::after {
+          content: ""; display: block;
+          position: absolute;
+          top: 0; left: 0;
+          width: 100%; height: 100%;
+          background-size: 100% auto;
+          background-repeat: no-repeat;
+          background-position: center;
+          transform-origin: center bottom;
+        }
+      }
+
+      .ball {
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+        transform: translateY(calc(-50% + -25px));
+
+        &::after {
+          content: ""; display: block;
+          position: absolute;
+          top: calc(50% - 25px); left: calc(50% - 25px);
+          width: 50px; height: 50px;
+          border-radius: 50%;
+          background-color: #fff;
+        }
+      }
+
+      &::after {
+        content: ""; display: block; position: absolute;
+        left: -67.5px; bottom: -200px;
+        width: 0; height: 0;
+        border-top: solid 200px transparent;
+        border-right: solid 180px transparent;
+        border-left: solid 180px transparent;
+      }
+    }
+    .poster:nth-child(1) {
+      background-color: $theme-pink;
+      &::after { border-top-color: $theme-pink; }
+      .illust:after { background-image: url(../images/load-view/poster/1.png); }
+    }
+    .poster:nth-child(2) {
+      background-color: $theme-light-purple;
+      &::after { border-top-color: $theme-light-purple; }
+      .illust:after { background-image: url(../images/load-view/poster/2.png); }
+    }
+    .poster:nth-child(3) {
+      background-color: $theme-light-pink;
+      &::after { border-top-color: $theme-light-pink; }
+      .illust:after { background-image: url(../images/load-view/poster/3.png); }
+    }
+    .poster:nth-child(4) {
+      background-color: $theme-purple;
+      &::after { border-top-color: $theme-purple; }
+      .illust:after { background-image: url(../images/load-view/poster/4.png); }
+    }
+
+    .illust {
+      position: absolute;
+      top: calc(50% - 650px); left: 0;
+      width: 225px; height: 650px;
+      background-size: 100% auto;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+
+    &::after { content: ""; display: block; clear: both; }
+  }
+
+  /********************************************************************************************
+   * animation
+   ********************************************************************************************/
+  /*** panel ***/
   .load-view__body__panel__icon { .box { animation: rotate360 3s linear 0s infinite; } }
   .load-view__body__panel__icon_type_1 {
     animation:
@@ -217,4 +340,68 @@
       load-view__show-wait-icon 0.8s ease 0.9s forwards;
     .icon { animation: load-view__scale-wait-icon 1s ease 0.9s forwards; }
   }
+
+  .load-view[data-state="start"] {
+    /*** poster ***/
+    .load-view__body__poster {
+      .paint-ball { animation: load-view__move-paint-ball 1s ease 2.6s forwards; }
+
+      .poster:nth-child(1) {
+        animation: load-view__show-poster 0.5s ease 0s forwards;
+        .ball {
+          animation: load-view__fall-ball 0.6s ease 0.6s forwards;
+          &::after { animation: load-view__scale-ball 0.7s ease 1.2s forwards; }
+        }
+        .illust {
+          animation:
+            fadein 0.1s ease 1.45s forwards,
+            load-view__rotate-illust 0.7s ease 2.6s forwards,
+            fadeout 0.35s ease 2.95s forwards;
+          &::after { animation: load-view__sway-illust 0.8s ease-in-out 1.2s alternate infinite; }
+        }
+      }
+      .poster:nth-child(2) {
+        animation: load-view__show-poster 0.5s ease 0.2s forwards;
+        .ball {
+          animation: load-view__fall-ball 0.6s ease 0.8s forwards;
+          &::after { animation: load-view__scale-ball 0.7s ease 1.4s forwards; }
+        }
+        .illust {
+          animation:
+            fadein 0.1s ease 1.65s forwards,
+            load-view__rotate-illust 0.7s ease 2.8s forwards,
+            fadeout 0.35s ease 3.15s forwards;
+          &::after { animation: load-view__sway-illust 0.8s ease-in-out 1.2s alternate infinite; }
+        }
+      }
+      .poster:nth-child(3) {
+        animation: load-view__show-poster 0.5s ease 0.4s forwards;
+        .ball {
+          animation: load-view__fall-ball 0.6s ease 1s forwards;
+          &::after { animation: load-view__scale-ball 0.7s ease 1.6s forwards; }
+        }
+        .illust {
+          animation:
+            fadein 0.1s ease 1.85s forwards,
+            load-view__rotate-illust 0.7s ease 3s forwards,
+            fadeout 0.35s ease 3.35s forwards;
+          &::after { animation: load-view__sway-illust 0.8s ease-in-out 1.2s alternate infinite; }
+        }
+      }
+      .poster:nth-child(4) {
+        animation: load-view__show-poster 0.5s ease 0.6s forwards;
+        .ball {
+          animation: load-view__fall-ball 0.6s ease 1.2s forwards;
+          &::after { animation: load-view__scale-ball 0.7s ease 1.8s forwards; }
+        }
+        .illust {
+          animation:
+            fadein 0.1s ease 2.1s forwards,
+            load-view__rotate-illust 0.7s ease 3.2s forwards,
+            fadeout 0.35s ease 3.55s forwards;
+          &::after { animation: load-view__sway-illust 0.8s ease-in-out 1.2s alternate infinite; }
+        }
+      }
+    }
+  }
 }