From 7842544d0eeb651096fd7a8515e7cc6e18c51b7e Mon Sep 17 00:00:00 2001 From: yuki540 Date: Wed, 4 Apr 2018 21:20:12 +0900 Subject: [PATCH] =?UTF-8?q?add:=20gab-animation=E3=81=AE=E3=83=95=E3=83=AC?= =?UTF-8?q?=E3=83=BC=E3=83=A0=E3=81=AB=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB?= =?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 --- public/images/gab-animation/bg.png | Bin 0 -> 4381 bytes src/scss/keyframes/pc/_gab-animation.scss | 78 +++++++++++++++++++++ src/scss/modules/pc/_gab-animation.scss | 79 ++++++++++++++++++++++ 3 files changed, 157 insertions(+) create mode 100644 public/images/gab-animation/bg.png create mode 100644 src/scss/keyframes/pc/_gab-animation.scss diff --git a/public/images/gab-animation/bg.png b/public/images/gab-animation/bg.png new file mode 100644 index 0000000000000000000000000000000000000000..241a98df8c2e930f5363026bb3a850deb58504a8 GIT binary patch literal 4381 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 W)zXPo=NdQvLl~b#A*=M=FZ~NSS3Um# literal 0 HcmV?d00001 diff --git a/src/scss/keyframes/pc/_gab-animation.scss b/src/scss/keyframes/pc/_gab-animation.scss new file mode 100644 index 0000000..c7460b9 --- /dev/null +++ b/src/scss/keyframes/pc/_gab-animation.scss @@ -0,0 +1,78 @@ +@keyframes gab-animation__fall-frame { + 0% { top: -100px; } + 50% { top: calc(50% + 180px); transform: scale(1); } + 60% { top: calc(50% + 180px); transform: scale(1.4, 0.8); } + 70% { transform: scale(1); } + 100% { top: calc(50% - 50px); } +} +@keyframes gab-animation__scale-frame { + 0% { transform: scale(1); opacity: 1; } + 25% { transform: scale(3,2); opacity: 0.5; } + 50% { transform: scale(1); opacity: 1; } + 75% { transform: scale(2,3); opacity: 0.5; } + 100% { transform: scale(1); opacity:1; } +} +@keyframes gab-animation__open-frame { + from { + top: calc(50% - 50px); left: calc(50% - 50px); + width: 100px; height: 100px; + border-radius: 50%; + } + to { + top: 40px; left: 40px; + width: calc(100% - 80px); height: calc(100% - 80px); + border-radius: 0%; + } +} + +@keyframes gab-animation__move-y1-area-1 { + from { transform: translate(0, 0); } + to { transform: translate(0, -50px); } +} +@keyframes gab-animation__move-y2-area-1 { + from { transform: translate(calc(-100% + 5px), -50px); } + to { transform: translate(calc(-100% + 5px), 100%); } +} +@keyframes gab-animation__move-y1-area-2 { + from { transform: translate(0, 0); } + to { transform: translate(0, 50px); } +} +@keyframes gab-animation__move-y2-area-2 { + from { transform: translate(calc(100% - 5px), 50px); } + to { transform: translate(calc(100% - 5px), -100%); } +} +@keyframes gab-animation__move-x-area-1 { + from { transform: translate(0, -50px); } + to { transform: translate(calc(-100% + 5px), -50px); } +} +@keyframes gab-animation__move-x-area-2 { + from { transform: translate(0, 50px); } + to { transform: translate(calc(100% - 5px), 50px); } +} + +@keyframes gab-animation__move-y-area-bg-1 { + from { transform: translate(calc(-100% + 5px), -100%); } + to { transform: translate(calc(-100% + 5px), 0%); } +} +@keyframes gab-animation__move-y-area-bg-2 { + from { transform: translate(calc(100% - 5px), 100%); } + to { transform: translate(calc(100% - 5px), 0%); } +} +@keyframes gab-animation__move-x-area-bg-1 { + from { transform: translate(calc(-100% + 5px), 0%); } + to { transform: translate(0, 0%); } +} +@keyframes gab-animation__move-x-area-bg-2 { + from { transform: translate(calc(100% - 5px), 0%); } + to { transform: translate(0, 0%); } +} + +@keyframes gab-animation__radius-frame { + from { border-radius: 0; } + to { border-radius: 8px; } +} + +@keyframes gab-animation__show-bg { + from { opacity: 0; } + to { opacity: 0.2; } +} diff --git a/src/scss/modules/pc/_gab-animation.scss b/src/scss/modules/pc/_gab-animation.scss index 27b9d09..163a3fc 100644 --- a/src/scss/modules/pc/_gab-animation.scss +++ b/src/scss/modules/pc/_gab-animation.scss @@ -5,6 +5,7 @@ width: 100%; height: 100%; min-width: $min-width; min-height: $min-height; background-color: $theme-light-pink; + overflow: hidden; z-index: 1001; } @@ -21,6 +22,47 @@ } } + /*** frame ***/ + .gab-animation__frame { + position: absolute; + top: -100px; left: calc(50% - 50px); + width: 100px; height: 100px; + border-radius: 50%; + overflow: hidden; + + .area { + position: relative; + float: left; + width: 50%; height: 100%; + overflow: hidden; + + &::before, + &::after { + content: ""; display: block; + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + } + &::before { background-color: $theme-light-pink; } + &::after { background-color: $theme-purple; } + } + .area:nth-child(1) { + &::after { transform: translate(calc(-100% + 5px), -100%); } + } + .area:nth-child(2) { + &::after { transform: translate(calc(100% - 5px), 100%); } + } + + &::after { + content: ""; display: block; + position: absolute; + width: 100%; height: 100%; + background-image: url(../images/gab-animation/bg.png); + background-size: 30px; + opacity: 0; + } + } + /************************************************************************************************* * animation *************************************************************************************************/ @@ -35,5 +77,42 @@ div:nth-child(7) { animation: slide-right 0.4s ease 0.6s forwards; } div:nth-child(8) { animation: slide-right 0.4s ease 0.7s forwards; } } + + .gab-animation__frame { + animation: + gab-animation__fall-frame 0.5s ease-out 1.1s forwards, + gab-animation__scale-frame 0.7s ease-in-out 1.6s forwards, + gab-animation__open-frame 0.4s ease-in-out 2.3s forwards, + gab-animation__radius-frame 1s ease-in-out 3.8s forwards; + + &::after { animation: gab-animation__show-bg 0.4s ease 3.8s forwards; } + + .area:nth-child(1) { + &::before { + animation: + gab-animation__move-y1-area-1 0.3s ease 2.7s forwards, + gab-animation__move-x-area-1 0.4s ease 3s forwards, + gab-animation__move-y2-area-1 0.3s ease 3.4s forwards; + } + &::after { + animation: + gab-animation__move-y-area-bg-1 0.3s ease 3.5s forwards, + gab-animation__move-x-area-bg-1 0.4s ease 3.8s forwards; + } + } + .area:nth-child(2) { + &::before { + animation: + gab-animation__move-y1-area-2 0.3s ease 2.7s forwards, + gab-animation__move-x-area-2 0.4s ease 3s forwards, + gab-animation__move-y2-area-2 0.3s ease 3.4s forwards; + } + &::after { + animation: + gab-animation__move-y-area-bg-2 0.3s ease 3.5s forwards, + gab-animation__move-x-area-bg-2 0.4s ease 3.8s forwards; + } + } + } } }