add: end-animationにスタイルを適用

src/scss/keyframes/pc/_end-animation.scss

@@ -0,0 +1,63 @@
+@keyframes end-animation__show-paint {
+  0%   { opacity: 0; transform: scale(8); border-radius: 50%; }
+  40%  { border-radius: 50%; }
+  100% { opacity: 1; transform: scale(1); border-radius: 0%; }
+}
+
+@keyframes end-animation__end-roll-color-1 {
+  from { background-color: $theme-mint; }
+  to   { background-color: $theme-pink; }
+}
+@keyframes end-animation__end-roll-color-2 {
+  from { background-color: $theme-pink; }
+  to   { background-color: $theme-light-purple; }
+}
+@keyframes end-animation__end-roll-color-3 {
+  from { background-color: $theme-light-purple; }
+  to   { background-color: $theme-purple; }
+}
+@keyframes end-animation__end-roll-color-4 {
+  from { background-color: $theme-purple; }
+  to   { background-color: $theme-light-pink; }
+}
+
+@keyframes end-animation__move-text-ball-1 {
+  from { transform: translateX(800px) rotate(0deg); opacity: 0; }
+  to   { transform: translateX(0px) rotate(-15deg); opacity: 1; }
+}
+@keyframes end-animation__jump-text-ball-1 {
+  0%   { transform: translateY(300px) scale(0); }
+  50%  { transform: translateY(-150px) scale(0.5); }
+  100% { transform: translateY(0px) scale(1); }
+}
+@keyframes end-animation__move-text-ball-2 {
+  from { transform: translateY(800px) rotate(0deg); opacity: 0; }
+  to   { transform: translateY(0px) rotate(15deg); opacity: 1; }
+}
+@keyframes end-animation__jump-text-ball-2 {
+  0%   { transform: translateX(-300px) scale(0); }
+  50%  { transform: translateX(150px) scale(0.5); }
+  100% { transform: translateX(0px) scale(1); }
+}
+
+@keyframes end-animation__move-text-ball-3 {
+  from { transform: translateX(800px) rotate(0deg); opacity: 0; }
+  to   { transform: translateX(0px) rotate(-15deg); opacity: 1; }
+}
+@keyframes end-animation__jump-text-ball-3 {
+  0%   { transform: translateY(-300px) scale(0); }
+  50%  { transform: translateY(150px) scale(0.5); }
+  100% { transform: translateY(0px) scale(1); }
+}
+
+@keyframes end-animation__down-window {
+  0% { transform: translateY(-100%); }
+  60% { transform: translateY(0%); }
+  80% { transform: translateY(-30px); }
+  100% { transform: translateY(0%); }
+}
+@keyframes end-animation__end {
+  0%   { transform: rotateZ(-20deg) rotateX(0deg); opacity: 1; }
+  50%  { opacity: 1; }
+  100% { transform: rotateZ(-20deg) rotateX(90deg); opacity: 0; }
+}

src/scss/modules/pc/_end-animation.scss

@@ -0,0 +1,194 @@
+@include pc-layout {
+  .end-animation {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    overflow: hidden;
+    z-index: 997;
+  }
+
+  /*** end-roll ***/
+  .end-animation__end-roll {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background-color: $theme-mint;
+
+    .text-balls {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+
+      .text-ball {
+        position: absolute;
+        width: 180px; height: 180px;
+        border-radius: 50%;
+        opacity: 0;
+
+        .inner {
+          position: absolute;
+          top: 0; left: 0;
+          width: 100%; height: 100%;
+          background-color: #F0EFE7;
+          border-radius: 50%;
+          border: solid 10px #F0EFE7;
+          box-sizing: border-box;
+          overflow: hidden;
+
+          .bg { width: 100%; height: 100%; }
+          .bg div {
+            width: 100%; height: 10%;
+            background-color: #EBC1C7;
+            margin-bottom: 10%;
+            transform: translateX(-100%);
+          }
+
+          &::after {
+            content: ""; display: block;
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            background-size: 60%;
+            background-position: center;
+            background-repeat: no-repeat;
+            opacity: 0;
+          }
+        }
+      }
+      .text-ball:nth-child(1) {
+        top: 50px; left: 50px;
+        .inner:after { background-image: url(../images/end-animation/end-roll/1.png); }
+      }
+      .text-ball:nth-child(2) {
+        top: 50px; right: 50px;
+        .inner:after { background-image: url(../images/end-animation/end-roll/2.png); }
+      }
+      .text-ball:nth-child(3) {
+        bottom: 50px; left: 50px;
+        .inner:after { background-image: url(../images/end-animation/end-roll/3.png); }
+      }
+    }
+
+    .paints {
+      position: absolute;
+      top: calc(50% - 60px); left: calc(50% - 60px);
+      width: 120px; height: 120px;
+
+      div {
+        float: left;
+        width: calc(50% - 5px); height: calc(50% - 5px);
+        margin-right: 10px;
+        border-radius: 50%;
+        opacity: 0;
+      }
+      div:nth-child(1),
+      div:nth-child(2) { margin-bottom: 10px; }
+      div:nth-child(2n) { margin-right: 0; }
+      div:nth-child(1) { background-color: $theme-pink; }
+      div:nth-child(2) { background-color: $theme-light-purple; }
+      div:nth-child(3) { background-color: $theme-purple; }
+      div:nth-child(4) { background-color: $theme-light-pink; }
+    }
+
+    .window {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      background-color: $theme-bg;
+      transform: translateY(-100%);
+      perspective: 1500px;
+
+      img {
+        display: block;
+        height: 200px;
+        position: absolute;
+        bottom: 30px; right: 0px;
+        transform: rotateZ(-20deg);
+      }
+
+      &::before {
+        content: ""; display: block;
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+        background-image: url(../images/bg.png);
+        background-size: 15px;
+        opacity: 0.6;
+      }
+    }
+  }
+
+  .end-animation[data-state="start"] {
+    /*** end-roll ***/
+    .end-animation__end-roll {
+      animation:
+        end-animation__end-roll-color-1 0.5s ease 1.2s forwards,
+        end-animation__end-roll-color-2 0.5s ease 2.1s forwards,
+        end-animation__end-roll-color-3 0.5s ease 3s forwards,
+        end-animation__end-roll-color-4 0.5s ease 3.9s forwards;
+
+      .text-balls {
+        .text-ball:nth-child(1) {
+          animation: end-animation__move-text-ball-1 0.4s ease 1.2s forwards;
+          .inner {
+            animation: end-animation__jump-text-ball-1 0.4s ease 1.2s forwards;
+            &::after { animation: fadein 0.5s ease 1.6s forwards; }
+          }
+          .bg div:nth-child(1) { animation: slide-right 0.3s ease 1.6s forwards; }
+          .bg div:nth-child(2) { animation: slide-right 0.3s ease 1.65s forwards; }
+          .bg div:nth-child(3) { animation: slide-right 0.3s ease 1.7s forwards; }
+          .bg div:nth-child(4) { animation: slide-right 0.3s ease 1.75s forwards; }
+          .bg div:nth-child(5) { animation: slide-right 0.3s ease 1.8s forwards; }
+        }
+        .text-ball:nth-child(2) {
+          animation: end-animation__move-text-ball-2 0.4s ease 2.1s forwards;
+          .inner {
+            animation: end-animation__jump-text-ball-2 0.4s ease 2.1s forwards;
+            &::after { animation: fadein 0.5s ease 2.5s forwards; }
+          }
+          .bg div:nth-child(1) { animation: slide-right 0.3s ease 2.5s forwards; }
+          .bg div:nth-child(2) { animation: slide-right 0.3s ease 2.55s forwards; }
+          .bg div:nth-child(3) { animation: slide-right 0.3s ease 2.6s forwards; }
+          .bg div:nth-child(4) { animation: slide-right 0.3s ease 2.65s forwards; }
+          .bg div:nth-child(5) { animation: slide-right 0.3s ease 2.7s forwards; }
+        }
+        .text-ball:nth-child(3) {
+          animation: end-animation__move-text-ball-3 0.4s ease 3s forwards;
+          .inner {
+            animation: end-animation__jump-text-ball-3 0.4s ease 3s forwards;
+            &::after { animation: fadein 0.5s ease 3.4s forwards; }
+          }
+          .bg div:nth-child(1) { animation: slide-right 0.3s ease 3.4s forwards; }
+          .bg div:nth-child(2) { animation: slide-right 0.3s ease 3.45s forwards; }
+          .bg div:nth-child(3) { animation: slide-right 0.3s ease 3.5s forwards; }
+          .bg div:nth-child(4) { animation: slide-right 0.3s ease 3.55s forwards; }
+          .bg div:nth-child(5) { animation: slide-right 0.3s ease 3.6s forwards; }
+        }
+      }
+
+      .paints {
+        div:nth-child(1) {
+          animation:
+            end-animation__show-paint 0.6s ease 0s forwards,
+            scale0-1 0.5s ease-out 1.2s reverse forwards;
+          }
+        div:nth-child(2) {
+          animation:
+            end-animation__show-paint 0.4s ease 0.2s forwards,
+            scale0-1 0.5s ease-out 2.1s reverse forwards;  
+        }
+        div:nth-child(3) {
+          animation:
+            end-animation__show-paint 0.4s ease 0.4s forwards,
+            scale0-1 0.5s ease-out 3s reverse forwards;  
+        }
+        div:nth-child(4) { animation: end-animation__show-paint 0.4s ease 0.6s forwards; }
+      }
+
+      .window {
+        animation: end-animation__down-window 0.5s ease-out 4.2s forwards;
+        img { animation: end-animation__end 0.5s ease 4.7s forwards; }
+      }
+    }
+  }
+}