From bee4a7c97450003f2be28b04dc6bbe1be09ccd6f Mon Sep 17 00:00:00 2001
From: yuki540 <tabletennis540@gmail.com>
Date: Wed, 21 Feb 2018 14:21:19 +0900
Subject: [PATCH] =?UTF-8?q?update:=20=E3=82=AD=E3=83=A3=E3=83=A9=E3=82=AF?=
 =?UTF-8?q?=E3=82=BF=E3=83=BC=E3=83=91=E3=83=8D=E3=83=AB=E3=81=AB=E3=82=A2?=
 =?UTF-8?q?=E3=83=8B=E3=83=A1=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92?=
 =?UTF-8?q?=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/load-view.scss | 57 ++++++++++++++++++++++++++++
 src/scss/modules/pc/load-view.scss   | 29 ++++++++++++++
 2 files changed, 86 insertions(+)

diff --git a/src/scss/keyframes/pc/load-view.scss b/src/scss/keyframes/pc/load-view.scss
index b2cc961..6f7c549 100644
--- a/src/scss/keyframes/pc/load-view.scss
+++ b/src/scss/keyframes/pc/load-view.scss
@@ -147,3 +147,60 @@
   80%  { transform: scale(0); }
   100% { transform: scale(1); }
 }
+
+/*** block ***/
+@keyframes load-view__block1 {
+  0%   { transform: rotate(45deg) translateY(-100px); opacity: 0; }
+  100% { transform: rotate(45deg) translateY(0px); opacity: 1; }
+}
+@keyframes load-view__block2 {
+  0%   { transform: rotate(45deg) translateY(100px); opacity: 0; }
+  100% { transform: rotate(45deg) translateY(0px); opacity: 1; }
+}
+
+/*** block-effect ***/
+@keyframes load-view__block-effect {
+  0%   { transform: scale(0.6); opacity: 0; border-width: 20px; }
+  50%  { opacity: 1; }
+  100% { transform: scale(1.4); opacity: 0; border-width: 5px; }
+}
+
+
+/*** char ***/
+@keyframes load-view__char1 {
+  0%   { opacity: 0; transform: rotate(-35deg) scale(0.8); }
+  35%  { transform: rotate(-55deg); }
+  70%  { transform: rotate(-35deg); }
+  100% { opacity: 1; transform: rotate(-55deg) scale(1.0); }
+}
+@keyframes load-view__char2 {
+  0%   { opacity: 0; transform: translate(20px, 10px) rotate(-45deg); }
+  100% { opacity: 1; transform: translate(0px, 0px) rotate(-45deg); }
+}
+@keyframes load-view__char3 {
+  0%   { opacity: 0; transform: translateX(-20px) rotate(-45deg); }
+  100% { opacity: 1; transform: translateX(0px) rotate(-45deg); }
+}
+@keyframes load-view__char4 {
+  0%   { opacity: 0; transform: translate(-20px, -20px) rotate(-45deg); }
+  100% { opacity: 1; transform: translate(0, 0) rotate(-45deg); }
+}
+@keyframes load-view__char5 {
+  0%   { opacity: 0; transform: rotate(-45deg) scale(1); }
+  50%  { transform: rotate(-45deg) scale(1.2); }
+  100% { opacity: 1; transform: rotate(-45deg) scale(1); }
+}
+@keyframes load-view__char6 {
+  0%   { opacity: 0; transform: translate(0px, 0px) rotate(-45deg); }
+  25%  { transform: translate(-10px, -10px) rotate(-45deg); }
+  50%  { transform: translate(0px, 0px) rotate(-45deg); }
+  75%  { transform: translate(-10px, -10px) rotate(-45deg); }
+  100% { opacity: 1; transform: translate(0, 0) rotate(-45deg); }
+}
+@keyframes load-view__char7 {
+  0%   { opacity: 0; transform: scale(1.4) rotate(-45deg); }
+  25%  { transform: scale(1.2) rotate(-45deg); }
+  50%  { opacity: 1; transform: scale(1.4) rotate(-45deg); }
+  75%  { opacity: 1; transform: scale(1.2) rotate(-45deg); }
+  100% { opacity: 1; transform: scale(1.4) rotate(-45deg); }
+}
diff --git a/src/scss/modules/pc/load-view.scss b/src/scss/modules/pc/load-view.scss
index 3e66767..96ca61d 100644
--- a/src/scss/modules/pc/load-view.scss
+++ b/src/scss/modules/pc/load-view.scss
@@ -369,6 +369,35 @@
         .block:nth-child(5) { animation: load-view__block1 0.5s ease 0.4s forwards; }
         .block:nth-child(6) { animation: load-view__block2 0.5s ease 0.5s forwards; }
         .block:nth-child(7) { animation: load-view__block1 0.5s ease 0.6s forwards; }
+        
+        .block[data-state="true"]:nth-child(1) {
+          div      { animation: load-view__block-effect 0.5s ease 0s forwards; }
+          &::after { animation: load-view__char1 0.8s ease 0s forwards; }
+        }
+        .block[data-state="true"]:nth-child(2) {
+          div      { animation: load-view__block-effect 0.5s ease 0s forwards; }
+          &::after { animation: load-view__char2 0.8s ease 0s forwards; }
+        }
+        .block[data-state="true"]:nth-child(3) {
+          div      { animation: load-view__block-effect 0.5s ease 0s forwards; }
+          &::after { animation: load-view__char3 0.8s ease 0s forwards; }
+        }
+        .block[data-state="true"]:nth-child(4) {
+          div      { animation: load-view__block-effect 0.5s ease 0s forwards; }
+          &::after { animation: load-view__char4 0.8s ease 0s forwards; }
+        }
+        .block[data-state="true"]:nth-child(5) {
+          div      { animation: load-view__block-effect 0.5s ease 0s forwards; }
+          &::after { animation: load-view__char5 0.8s ease 0s forwards; }
+        }
+        .block[data-state="true"]:nth-child(6) {
+          div      { animation: load-view__block-effect 0.5s ease 0s forwards; }
+          &::after { animation: load-view__char6 0.8s ease 0s forwards; }
+        }
+        .block[data-state="true"]:nth-child(7) {
+          div      { animation: load-view__block-effect 0.5s ease 0s forwards; }
+          &::after { animation: load-view__char7 0.8s ease 0s forwards; }
+        }
       }
 
       /*** progress-bar ***/