From 6ebe7ff7207a6bdf2792c72a5ae683478c63afe8 Mon Sep 17 00:00:00 2001
From: yuki540 <tabletennis540@gmail.com>
Date: Mon, 16 Apr 2018 16:29:13 +0900
Subject: [PATCH] =?UTF-8?q?update:=20=E9=80=9A=E8=A9=B1=E3=83=9C=E3=82=BF?=
 =?UTF-8?q?=E3=83=B3=E3=81=AE=E3=82=BF=E3=83=83=E3=83=97=E3=82=A8=E3=83=95?=
 =?UTF-8?q?=E3=82=A7=E3=82=AF=E3=83=88=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/_common.scss     |  4 ++++
 src/scss/keyframes/pc/_calling.scss |  9 +++++++++
 src/scss/modules/pc/_calling.scss   | 15 +++++++++++++++
 3 files changed, 28 insertions(+)

diff --git a/src/scss/keyframes/_common.scss b/src/scss/keyframes/_common.scss
index 9bf63c9..b7d326c 100644
--- a/src/scss/keyframes/_common.scss
+++ b/src/scss/keyframes/_common.scss
@@ -34,6 +34,10 @@
   from { transform: scale(0); }
   to   { transform: scale(0.5); }
 }
+@keyframes scale1-0dot5 {
+  from { transform: scale(1); }
+  to   { transform: scale(0.5); }
+}
 @keyframes scale10 {
   from { transform: scale(1); }
   to   { transform: scale(10); }
diff --git a/src/scss/keyframes/pc/_calling.scss b/src/scss/keyframes/pc/_calling.scss
index be3dab2..2389dbd 100644
--- a/src/scss/keyframes/pc/_calling.scss
+++ b/src/scss/keyframes/pc/_calling.scss
@@ -6,6 +6,14 @@
   from { transform: rotate(45deg) scale(2); opacity: 0; }
   to   { transform: rotate(45deg) scale(1); opacity: 1; }
 }
+@keyframes calling__touch-btn {
+  from { border-width: 40px; opacity: 0; transform: scale(0.6); }
+  to   { border-width: 0px; opacity: 0.8; transform: scale(3); }
+}
+@keyframes calling__press-btn {
+  from { transform: scale(1) rotate(45deg); opacity: 1; }
+  to   { transform: scale(0.6) rotate(45deg); opacity: 0.6; }
+}
 
 @keyframes calling__icon-frame-1 {
   from { transform: scale(0) translate(-5px, 5px); opacity: 0; }
@@ -15,3 +23,4 @@
   from { transform: scale(0) translate(5px, -5px); opacity: 0; }
   to   { transform: scale(1) translate(0); opacity: 1; }
 }
+
diff --git a/src/scss/modules/pc/_calling.scss b/src/scss/modules/pc/_calling.scss
index 5690c0d..5b88d39 100644
--- a/src/scss/modules/pc/_calling.scss
+++ b/src/scss/modules/pc/_calling.scss
@@ -93,6 +93,16 @@
       right: 0;
       .fa-phone { color: #6C9A7B; transform: rotate(45deg); }
     }
+
+    .touch {
+      position: absolute;
+      top: 0; right: 0;
+      width: 80px; height: 80px;
+      border-radius: 50%;
+      border: solid 40px #fff;
+      box-sizing: border-box;
+      opacity: 0;
+    }
   }
 
   /*** icons ***/
@@ -205,6 +215,8 @@
 
     /*** icons ***/
     .calling__icons {
+      animation: fadeout 0.5s ease 6.6s forwards;
+      .icon-box .name { animation: fadeout 0.5s ease 6.6s forwards; }
       .icon-box:nth-child(1) {
         .icon {
           animation:
@@ -263,6 +275,7 @@
 
     /*** controls-btn ***/
     .calling__controls-btn {
+      animation: fadeout 0.5s ease 6.6s forwards;
       .btn-1 {
         div:nth-child(1):after { animation: slide-left 0.6s ease 0.7s forwards; }
         div:nth-child(2):after { animation: slide-bottom 0.6s ease 0.7s forwards; }
@@ -271,12 +284,14 @@
         .fa-phone { animation: calling__show-btn-1 0.7s ease 1s forwards; }
       }
       .btn-2 {
+        animation: calling__press-btn 0.3s ease 5.9s alternate 2 forwards;
         div:nth-child(1):after { animation: slide-left 0.6s ease 0.9s forwards; }
         div:nth-child(2):after { animation: slide-bottom 0.6s ease 0.9s forwards; }
         div:nth-child(3):after { animation: slide-right 0.6s ease 0.9s forwards; }
         div:nth-child(4):after { animation: slide-top 0.6s ease 0.9s forwards; }
         .fa-phone { animation: calling__show-btn-2 0.7s ease 1.2s forwards; }
       }
+      .touch { animation: calling__touch-btn 0.6s ease 5.9s forwards; }
     }
   }
 }