diff --git a/src/scss/keyframes/_common.scss b/src/scss/keyframes/_common.scss index f512338..1c6677d 100644 --- a/src/scss/keyframes/_common.scss +++ b/src/scss/keyframes/_common.scss @@ -26,7 +26,15 @@ from { transform: translateY(-100%); } to { transform: translateY(0%); } } +@keyframes scale0-1 { + from { transform: scale(0); } + to { transform: scale(1); } +} @keyframes scale10 { from { transform: scale(1); } to { transform: scale(10); } } +@keyframes scale1dot5 { + from { transform: scale(1); } + to { transform: scale(1.5); } +} diff --git a/src/scss/keyframes/pc/_gab-animation.scss b/src/scss/keyframes/pc/_gab-animation.scss index 340312f..fcac60f 100644 --- a/src/scss/keyframes/pc/_gab-animation.scss +++ b/src/scss/keyframes/pc/_gab-animation.scss @@ -168,3 +168,39 @@ 85% { transform: translateY(-10px); } 100% { transform: translateY(0%); } } + +@keyframes gab-animation__effect { + from { transform: translateY(60px); } + to { transform: translateY(-50px); } +} +@keyframes gab-animation__scale-ball { + from { transform: scale(0); } + to { transform: scale(1.4); } +} + +@keyframes gab-animation__move-end-block-1 { + 0% { transform: translateY(0) scale(1); opacity: 1; } + 90% { opacity: 1; } + 100% { transform: translateY(-200px) scale(0.4); opacity: 0; } +} +@keyframes gab-animation__move-end-block-2 { + 0% { transform: translateY(0) scale(1); opacity: 1; } + 90% { opacity: 1; } + 100% { transform: translateY(200px) scale(0.4); opacity: 0; } +} +@keyframes gab-animation__show-end-block { + from { height: 0; top: 50%; } + to { height: 400px; top: calc(50% - 200px); } +} +@keyframes gab-animation__close { + from { + width: 400px; height: 400px; + top: calc(50% - 200px); left: calc(50% - 200px); + border-radius: 50%; + } + to { + width: 100%; height: 100%; + top: 0; left: 0; + border-radius: 0%; + } +} diff --git a/src/scss/modules/pc/_gab-animation.scss b/src/scss/modules/pc/_gab-animation.scss index d00deea..2ad4a1b 100644 --- a/src/scss/modules/pc/_gab-animation.scss +++ b/src/scss/modules/pc/_gab-animation.scss @@ -430,6 +430,104 @@ } } + .gab-animation__close { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + z-index: 6; + + .effect { + position: absolute; + width: 200px; height: 200px; + border-radius: 50%; + transform: scale(1.5); + overflow: hidden; + + div { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + &:after { + content: ""; display: block; + position: absolute; + top: 5px; left: calc(50% - 10px); + width: 0; height: 0; + border: solid 10px transparent; + border-top: solid 35px $theme-purple; + opacity: 0; + } + } + div:nth-child(1) { transform: rotate(0deg); } + div:nth-child(2) { transform: rotate(30deg); } + div:nth-child(3) { transform: rotate(60deg); } + div:nth-child(4) { transform: rotate(90deg); } + div:nth-child(5) { transform: rotate(120deg); } + div:nth-child(6) { transform: rotate(150deg); } + div:nth-child(7) { transform: rotate(180deg); } + div:nth-child(8) { transform: rotate(210deg); } + div:nth-child(9) { transform: rotate(240deg); } + div:nth-child(10) { transform: rotate(270deg); } + div:nth-child(11) { transform: rotate(300deg); } + div:nth-child(12) { transform: rotate(330deg); } + } + .effect-1 { top: calc(50% - 100px); left: calc(50% - 100px); } + .effect-2 { top: 20px; right: 20px; } + .effect-3 { bottom: 20px; left: 20px; } + + .ball { + position: absolute; + width: 600px; height: 600px; + border-radius: 50%; + background-color: $theme-purple; + transform: scale(0); + + &::after { + content: ""; display: block; + position: absolute; + top: 20%; left: 20%; + width: 60%; height: 60%; + border-radius: 50%; + background-color: $theme-light-purple; + } + } + .ball-1 { top: calc(20px - 312px); right: calc(20px - 312px); } + .ball-2 { top: calc(50% - 312px); left: calc(50% - 312px); } + .ball-3 { bottom: calc(20px - 312px); left: calc(20px - 312px); } + + .end-block { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + + .paint-ball { + position: absolute; + top: calc(50% - 20px); left: calc(50% - 20px); + width: 40px; height: 40px; + border-radius: 50%; + background-color: $theme-purple; + transform: scale(0); + } + + &::before, + &::after { + position: absolute; + content: ""; display: block; + } + &::before { + left: calc(50% - 1px); top: 50%; + width: 2px; height: 0; + background-color: $theme-purple; + } + &::after { + width: 400px; height: 400px; + border-radius: 50%; + background-color: $theme-purple; + top: calc(50% - 200px); left: calc(50% - 200px); + transform: scale(0); + } + } + } + /************************************************************************************************* * animation *************************************************************************************************/ @@ -670,10 +768,84 @@ } .gab-animation__camera { - animation: gab-animation__camera 2.8s ease-in-out 15.2s forwards; + animation: + gab-animation__camera 2.8s ease-in-out 15.2s forwards, + fadeout 0.1s ease 19s forwards; .layer-2:before { animation: slide-bottom 0.6s ease 16.2s forwards; } .layer-3:before { animation: slide-top 0.6s ease 16.6s forwards; } .layer-4:before { animation: gab-animation__show-layer 0.8s ease 17.1s forwards; } } + + .gab-animation__close { + .effect-1 { + div:after { + animation: + gab-animation__effect 0.6s ease-out 18.3s reverse forwards, + fadein 0.1s ease 18.3s forwards, + fadeout 0.1s ease 18.8s forwards, + gab-animation__effect 0.6s ease-out 19.7s forwards, + fadein 0.1s ease 19.7s forwards, + fadeout 0.1s ease 20.2s forwards; + } + } + .effect-2 { + div:after { + animation: + gab-animation__effect 0.6s ease-out 17.7s reverse forwards, + fadein 0.1s ease 17.7s forwards, + fadeout 0.1s ease 18.2s forwards, + gab-animation__effect 0.6s ease-out 19.1s forwards, + fadein 0.1s ease 19.1s forwards, + fadeout 0.1s ease 19.6s forwards; + } + } + .effect-3 { + div:after { + animation: + gab-animation__effect 0.6s ease 18s reverse forwards, + fadein 0.1s ease 18s forwards, + fadeout 0.1s ease 18.5s forwards, + gab-animation__effect 0.6s ease 19.4s forwards, + fadein 0.1s ease 19.4s forwards, + fadeout 0.1s ease 19.9s forwards; + } + } + .ball-1 { + animation: gab-animation__scale-ball 0.5s ease 18.2s alternate 2 forwards; + &::after { animation: gab-animation__scale-ball 0.4s ease 18.3s alternate 2 forwards; } + } + .ball-2 { + animation: gab-animation__scale-ball 0.5s ease 18.8s alternate 2 forwards; + &::after { animation: gab-animation__scale-ball 0.4s ease 18.9s alternate 2 forwards; } + } + .ball-3 { + animation: gab-animation__scale-ball 0.5s ease 18.5s alternate 2 forwards; + &::after { animation: gab-animation__scale-ball 0.4s ease 18.6s alternate 2 forwards; } + } + + .end-block { + .paint-ball:nth-child(1) { + animation: + scale0-1 0.4s ease 20s forwards, + gab-animation__move-end-block-1 0.4s ease 20.4s forwards; + } + .paint-ball:nth-child(2) { + animation: + scale0-1 0.4s ease 20s forwards, + gab-animation__move-end-block-2 0.4s ease 20.4s forwards; + } + &::before { + animation: + gab-animation__show-end-block 0.4s ease 20.4s forwards, + rotate360 0.6s ease-in-out 20.8s forwards; + } + &::after { + animation: + scale0-1 0.6s ease-out 20.8s forwards, + scale1dot5 0.3s ease 21.4s 2 alternate forwards, + gab-animation__close 0.5s ease 22s forwards; + } + } + } } }