From 71f09a7fc9f02478acd6573ba0e7919ede76dc35 Mon Sep 17 00:00:00 2001
From: yuki540 <tabletennis540@gmail.com>
Date: Fri, 23 Feb 2018 11:57:55 +0900
Subject: [PATCH] =?UTF-8?q?update:=20=E3=83=AA=E3=83=9C=E3=83=B3=E3=81=AB?=
 =?UTF-8?q?=E3=82=A2=E3=83=8B=E3=83=A1=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3?=
 =?UTF-8?q?=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/load-view.scss | 19 +++++++++++++++++++
 src/scss/modules/pc/load-view.scss   | 18 ++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/src/scss/keyframes/pc/load-view.scss b/src/scss/keyframes/pc/load-view.scss
index ee1d8aa..b8005af 100644
--- a/src/scss/keyframes/pc/load-view.scss
+++ b/src/scss/keyframes/pc/load-view.scss
@@ -333,3 +333,22 @@
   0%   { transform: translateX(calc(-100% - 3px)); }
   100% { transform: translateX(0%); }
 }
+
+
+/*** ribbon ***/
+@keyframes load-view__ribbon-1 {
+  0%   { transform: translateY(-100%); }
+  100% { transform: translateY(0%); }
+}
+@keyframes load-view__ribbon-2 {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(0%); }
+}
+@keyframes load-view__ribbon-3 {
+  0%   { transform: translateY(100%); }
+  100% { transform: translateY(0%); }
+}
+@keyframes load-view__ribbon-4 {
+  0%   { transform: translateX(100%); }
+  100% { transform: translateX(0%); }
+}
diff --git a/src/scss/modules/pc/load-view.scss b/src/scss/modules/pc/load-view.scss
index 696a746..716046e 100644
--- a/src/scss/modules/pc/load-view.scss
+++ b/src/scss/modules/pc/load-view.scss
@@ -890,5 +890,23 @@
         .arrow:nth-child(3) { div { animation: load-view__arrow 1.7s ease 5.4s forwards; } }
       }
     }
+    
+    /**
+     * ribbons
+     */
+    .ribbons {
+      .ribbon:nth-child(1) {
+        div:nth-child(2) { &::after { animation: load-view__ribbon-1 0.9s ease 3.6s forwards;  } }
+        div:nth-child(3) { &::after { animation: load-view__ribbon-2 0.9s ease 4.5s forwards;  } }
+        div:nth-child(4) { &::after { animation: load-view__ribbon-3 1.4s ease 5.4s forwards;  } }
+        div:nth-child(1) { &::after { animation: load-view__ribbon-4 0.6s ease 6.8s forwards;  } }
+      }
+      .ribbon:nth-child(2) {
+        div:nth-child(2) { &::after { animation: load-view__ribbon-1 0.9s ease 3.7s forwards;  } }
+        div:nth-child(3) { &::after { animation: load-view__ribbon-2 0.9s ease 4.6s forwards;  } }
+        div:nth-child(4) { &::after { animation: load-view__ribbon-3 1.4s ease 5.5s forwards;  } }
+        div:nth-child(1) { &::after { animation: load-view__ribbon-4 0.6s ease 6.9s forwards;  } }
+      }
+    }
   }
 }