From de54c035bc55d08259e31376d6400a5b3af80ac8 Mon Sep 17 00:00:00 2001
From: yuki540 <tabletennis540@gmail.com>
Date: Thu, 12 Apr 2018 16:39:59 +0900
Subject: [PATCH] =?UTF-8?q?update:=20=E3=82=AC=E3=83=B4=E3=83=AA=E3=83=BC?=
 =?UTF-8?q?=E3=83=AB=E3=83=AD=E3=82=B4=E3=81=AE=E6=89=93=E3=81=A1=E6=B6=88?=
 =?UTF-8?q?=E3=81=97=E8=A6=81=E7=B4=A0=E3=81=AB=E3=82=B9=E3=82=BF=E3=82=A4?=
 =?UTF-8?q?=E3=83=AB=E3=82=92=E9=81=A9=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scss/keyframes/pc/_gab-animation.scss | 22 +++++
 src/scss/modules/pc/_gab-animation.scss   | 99 +++++++++++++++++++++++
 2 files changed, 121 insertions(+)

diff --git a/src/scss/keyframes/pc/_gab-animation.scss b/src/scss/keyframes/pc/_gab-animation.scss
index 236db49..0769c64 100644
--- a/src/scss/keyframes/pc/_gab-animation.scss
+++ b/src/scss/keyframes/pc/_gab-animation.scss
@@ -135,3 +135,25 @@
   60%  { transform: scaleX(1); }
   100% { top: calc(50% - 30px); transform: scaleX(1.2); }
 }
+
+@keyframes gab-animation__show-clock-frame {
+  from { transform: scale(0); }
+  to   { transform: scale(1); }
+}
+@keyframes gab-animation__show-clock-hand {
+  from { height: 0; top: 50%; }
+  to   { height: 100%; top: 0%; }
+}
+
+@keyframes gab-animation__reverse-clock-hand {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(-30deg); }
+}
+@keyframes gab-animation__rotate-clock-hand {
+  from { transform: rotate(-30deg); }
+  to   { transform: rotate(360deg); }
+}
+@keyframes gab-animation__scale-clock-hand {
+  from { width: 10px; left: calc(50% - 5px); }
+  to   { width: 100%; left: 0; }
+}
diff --git a/src/scss/modules/pc/_gab-animation.scss b/src/scss/modules/pc/_gab-animation.scss
index d0d1aa6..274d1d3 100644
--- a/src/scss/modules/pc/_gab-animation.scss
+++ b/src/scss/modules/pc/_gab-animation.scss
@@ -305,6 +305,70 @@
     .paint:nth-child(3) { left: calc(50% - 50px); }
     .paint:nth-child(4) { left: calc(50% + 90px); }
     .paint:nth-child(5) { left: calc(50% + 230px); }
+
+    .frame {
+      position: absolute; left: 0;
+      width: 100%; height: calc((100% - 300px) / 2);
+      overflow: hidden;
+
+      div {
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+      }
+      div:nth-child(1) { background-color: $theme-gray; }
+      div:nth-child(2) { background-color: $theme-bg; }
+      div:nth-child(3) { background-color: $theme-light-pink; }
+      div:nth-child(4) { background-color: $theme-pink; }
+      div:nth-child(5) { background-color: $theme-mint; }
+    }
+    .frame-top {
+      top: 0;
+      div { transform: translateY(100%); }
+    }
+    .frame-bottom {
+      bottom: 0;
+      div { transform: translateY(-100%); }
+    }
+
+    .clock {
+      position: absolute;
+      top: calc((100% - 300px) / 2); left: 0;
+      width: 100%; height: 300px;
+
+      &::before,
+      &::after {
+        content: ""; display: block;
+        position: absolute;
+        transform: scale(0);
+      }
+      &::before {
+        top: calc(50% - 100px);
+        left: calc(50% - 100px);
+        width: 200px; height: 200px;
+        border-radius: 50%;
+        box-sizing: border-box;
+        border: dashed 5px $theme-mint;
+      }
+      &::after {
+        top: calc(50% - 125px);
+        left: calc(50% - 125px);
+        width: 250px; height: 250px;
+        border-radius: 50%;
+        box-sizing: border-box;
+        border: solid 10px $theme-mint;
+        border-top-color: transparent;
+        border-bottom-color: transparent;
+      }
+
+      div {
+        position: absolute;
+        left: calc(50% - 5px); top: 50%;
+        width: 10px; height: 0;
+        background-color: $theme-mint;
+        z-index: 1;
+      }
+    }
   }
 
   /*************************************************************************************************
@@ -509,6 +573,41 @@
         div:nth-child(4):after { animation: slide-bottom 0.9s ease 9.7s forwards; }
         .char:after { animation: slide-top 1.8s ease-out 9.7s reverse forwards; }
       }
+
+      .frame-top {
+        div:nth-child(1) { animation: slide-top 0.4s ease 12.5s forwards; }
+        div:nth-child(2) { animation: slide-top 0.4s ease 12.6s forwards; }
+        div:nth-child(3) { animation: slide-top 0.4s ease 12.7s forwards; }
+        div:nth-child(4) { animation: slide-top 0.4s ease 12.8s forwards; }
+        div:nth-child(5) { animation: slide-top 0.4s ease 12.9s forwards; }
+      }
+      .frame-bottom {
+        div:nth-child(1) { animation: slide-bottom 0.4s ease 12.5s forwards; }
+        div:nth-child(2) { animation: slide-bottom 0.4s ease 12.6s forwards; }
+        div:nth-child(3) { animation: slide-bottom 0.4s ease 12.7s forwards; }
+        div:nth-child(4) { animation: slide-bottom 0.4s ease 12.8s forwards; }
+        div:nth-child(5) { animation: slide-bottom 0.4s ease 12.9s forwards; }
+      }
+
+      .clock {
+        &::before {
+          animation:
+            gab-animation__show-clock-frame 0.5s ease 13.3s forwards,
+            rotate360 4s linear 13.8s infinite;
+        }
+        &::after {
+          animation:
+            gab-animation__show-clock-frame 0.5s ease 13.4s forwards,
+            rotate360 3s linear 13.9s infinite;
+        }
+        div {
+          animation:
+            gab-animation__show-clock-hand 0.3s ease 14s forwards,
+            gab-animation__reverse-clock-hand 0.4s ease 14.3s forwards,
+            gab-animation__rotate-clock-hand 0.3s ease-out 14.7s forwards,
+            gab-animation__scale-clock-hand 0.4s ease 14.8s forwards;
+        }
+      }
     }
   }
 }