update: カメラ移動にスタイルを適用

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

@@ -157,3 +157,14 @@
   from { width: 10px; left: calc(50% - 5px); }
   to   { width: 100%; left: 0; }
 }
+
+@keyframes gab-animation__camera {
+  from { perspective: 20px; }
+  to   { perspective: 400px; }
+}
+@keyframes gab-animation__show-layer {
+  0% { transform: translateY(-100%); }
+  70% { transform: translateY(0%); }
+  85% { transform: translateY(-10px); }
+  100% { transform: translateY(0%); }
+}

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

@@ -371,6 +371,65 @@
     }
   }
 
+  .gab-animation__camera {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    perspective: 20px;
+    z-index: 2;
+
+    .layer {
+      position: absolute;
+      top: calc(50% - 225px); left: calc(50% - 325px);
+      width: 650px; height: 450px;
+      border-radius: 30px;
+      overflow: hidden;
+      box-shadow: 0 0 10px #aaa;
+
+      &::before,
+      &::after {
+        content: ""; display: block;
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+        box-sizing: border-box;
+      }
+      &::before {
+        background-size: cover;
+        background-position: center;
+      }
+      &::after {
+        border: solid 25px #fff;
+        box-shadow: 0 0 10px #aaa inset;
+      }
+    }
+    .layer-1 {
+      transform: translateZ(20px) scale(calc(1 - (20 / 100)));
+      &::before { background-image: url(../images/gab-animation/comic/1.png); }
+    }
+    .layer-2 {
+      transform: translateZ(120px) scale(calc(1 - (120 / 200)));
+      &::before {
+        transform: translateY(-100%);
+        background-image: url(../images/gab-animation/comic/2.png);
+      }
+    }
+    .layer-3 {
+      transform: translateZ(220px) scale(calc(1 - (220 / 300)));
+      &::before {
+        transform: translateY(100%);
+        background-image: url(../images/gab-animation/comic/3.png);
+      }
+    }
+    .layer-4 {
+      transform: translateZ(320px) scale(calc(1 - (320 / 400)));
+      &::before {
+        transform: translateY(-100%);
+        background-image: url(../images/gab-animation/comic/4.png);
+      }
+    }
+  }
+
   /*************************************************************************************************
    * animation
    *************************************************************************************************/
@@ -609,5 +668,12 @@
         }
       }
     }
+
+    .gab-animation__camera {
+      animation: gab-animation__camera 2.8s ease-in-out 15.2s forwards;
+      .layer-2:before { animation: slide-bottom 0.6s ease 16.2s forwards; }
+      .layer-3:before { animation: slide-top 0.6s ease 16.6s forwards; }
+      .layer-4:before { animation: gab-animation__show-layer 0.8s ease 17.1s forwards; }
+    }
   }
 }