diff --git a/src/scss/keyframes/pc/load-view.scss b/src/scss/keyframes/pc/load-view.scss index 8c9023e..f05d33f 100644 --- a/src/scss/keyframes/pc/load-view.scss +++ b/src/scss/keyframes/pc/load-view.scss @@ -255,3 +255,74 @@ 30% { top: calc(50% - 30px); left: calc(50% - 30px); width: 60px; height: 60px; border-radius: 50%; } 100% { top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; } } + + +/*** figure1 ***/ +@keyframes load-view__figure1-1 { + 0% { border-top-width: 0; opacity: 0; } + 100% { border-top-width: 50px; opacity: 1; } +} +@keyframes load-view__figure1-2 { + 0% { height: 0; opacity: 0; } + 100% { height: 50px; opacity: 1; } +} +@keyframes load-view__figure1-3 { + 0% { transform: translateY(-50px); opacity: 0; } + 30% { transform: translateY(0px); opacity: 1; } + 65% { transform: translateY(-15px); opacity: 1; } + 100% { transform: translateY(0px); opacity: 1; } +} + +/*** figure2 ***/ +@keyframes load-view__figure2-1 { + 0% { transform: translateY(-30px); opacity: 0; } + 100% { transform: translateY(0px); opacity: 1; } +} +@keyframes load-view__figure2-2 { + 0% { transform: translateY(-50px); opacity: 0; } + 30% { transform: translateY(0px); opacity: 1; } + 65% { transform: translateY(-15px); opacity: 1; } + 100% { transform: translateY(0px); opacity: 1; } +} +@keyframes load-view__figure2-3 { + 0% { transform: translateY(30px) rotate(90deg); opacity: 0; } + 100% { transform: translateY(0px) rotate(0deg); opacity: 1; } +} + +/*** figure3 ***/ +@keyframes load-view__figure3-1 { + 0% { transform: translateY(-50px); opacity: 0; } + 30% { transform: translateY(0px); opacity: 1; } + 65% { transform: translateY(-15px); opacity: 1; } + 100% { transform: translateY(0px); opacity: 1; } +} +@keyframes load-view__figure3-2 { + 0% { transform: translateY(30px) rotate(90deg); opacity: 0; } + 100% { transform: translateY(0px) rotate(0deg); opacity: 1; } +} +@keyframes load-view__figure3-3 { + 0% { transform: translateY(-30px); opacity: 0; } + 100% { transform: translateY(0px); opacity: 1; } +} +@keyframes load-view__figure3-6 { + 0% { border-top-width: 0; opacity: 0; } + 100% { border-top-width: 50px; opacity: 1; } +} + +/*** catchcopy ***/ +@keyframes load-view__catchcopy { + 0% { opacity: 0; transform: scale(1.15); } + 100% { opacity: 1; transform: scale(1.0); } +} +@keyframes load-view__catchcopy-bg1 { + 0% { background-color: $theme-light-pink; } + 100% { background-color: $theme-bg; } +} +@keyframes load-view__catchcopy-bg2 { + 0% { background-color: $theme-bg; } + 100% { background-color: #9994A6; } +} +@keyframes load-view__catchcopy-bg3 { + 0% { background-color: #9994A6; } + 100% { background-color: $theme-pink; } +} diff --git a/src/scss/modules/pc/load-view.scss b/src/scss/modules/pc/load-view.scss index e97c295..5f4d069 100644 --- a/src/scss/modules/pc/load-view.scss +++ b/src/scss/modules/pc/load-view.scss @@ -690,5 +690,110 @@ &::before { animation: load-view___fail-paint 0.75s ease 2.6s forwards; } &::after { animation: load-view___fail-paint 0.75s ease 2.8s forwards; } } + + /** + * catchcopy + */ + .catchcopy { + animation: + fadein 0.3s ease 3.55s forwards, + load-view__catchcopy-bg1 0.4s ease 4.5s forwards, + load-view__catchcopy-bg2 0.4s ease 5.4s forwards, + load-view__catchcopy-bg3 0.4s ease 6.8s forwards; + + .text-box { + .text-split:nth-child(1) { + .figure { + div:nth-child(1) { + animation: + load-view__figure1-1 0.4s ease 3.6s forwards, + fadeout 0.4s ease 4.5s forwards; + } + div:nth-child(2) { + &::after { + animation: + load-view__figure1-1 0.4s ease 3.8s forwards, + fadeout 0.4s ease 4.5s forwards; + } + } + div:nth-child(3) { + animation: + load-view__figure1-3 0.5s ease 4.0s forwards, + fadeout 0.4s ease 4.5s forwards; + } + } + .text { animation: load-view__catchcopy 0.4s ease 4.5s forwards; } + } + .text-split:nth-child(2) { + .figure { + div:nth-child(1) { + &::before { + animation: + load-view__figure2-1 0.4s ease 4.5s forwards, + fadeout 0.4s ease 5.4s forwards; + } + &::after { + animation: + load-view__figure2-1 0.4s ease 4.6s forwards, + fadeout 0.4s ease 5.4s forwards; + } + } + div:nth-child(2) { + animation: + load-view__figure2-2 0.5s ease 4.8s forwards, + fadeout 0.4s ease 5.4s forwards; + } + div:nth-child(3) { + animation: + load-view__figure2-3 0.4s ease 5s forwards, + fadeout 0.4s ease 5.4s forwards; + } + } + .text { animation: load-view__catchcopy 0.4s ease 5.4s forwards; } + } + .text-split:nth-child(3) { + .figure { + div:nth-child(1) { + animation: + load-view__figure3-1 0.5s ease 5.4s forwards, + fadeout 0.4s ease 6.8s forwards; + } + div:nth-child(2) { + animation: + load-view__figure3-2 0.4s ease 5.6s forwards, + fadeout 0.4s ease 6.8s forwards; + } + div:nth-child(3) { + &::before { + animation: + load-view__figure3-3 0.4s ease 5.8s forwards, + fadeout 0.4s ease 6.8s forwards; + } + &::after { + animation: + load-view__figure3-3 0.4s ease 5.9s forwards, + fadeout 0.4s ease 6.8s forwards; + } + } + div:nth-child(4) { + animation: + load-view__figure3-1 0.5s ease 6.0s forwards, + fadeout 0.4s ease 6.8s forwards; + } + div:nth-child(5) { + animation: + load-view__figure3-2 0.4s ease 6.2s forwards, + fadeout 0.4s ease 6.8s forwards; + } + div:nth-child(6) { + animation: + load-view__figure3-6 0.4s ease 6.4s forwards, + fadeout 0.4s ease 6.8s forwards; + } + } + .text { animation: load-view__catchcopy 0.4s ease 6.8s forwards; } + } + } + } } }