diff --git a/src/scss/keyframes/_common.scss b/src/scss/keyframes/_common.scss index efe46bc..57768b9 100644 --- a/src/scss/keyframes/_common.scss +++ b/src/scss/keyframes/_common.scss @@ -51,3 +51,7 @@ from { width: 0; } to { width: 100%; } } +@keyframes height0-100 { + from { height: 0; } + to { height: 100%; } +} diff --git a/src/scss/keyframes/pc/_gab-animation.scss b/src/scss/keyframes/pc/_gab-animation.scss index fcac60f..b0f2cef 100644 --- a/src/scss/keyframes/pc/_gab-animation.scss +++ b/src/scss/keyframes/pc/_gab-animation.scss @@ -159,7 +159,7 @@ } @keyframes gab-animation__camera { - from { perspective: 20px; } + from { perspective: 0px; } to { perspective: 400px; } } @keyframes gab-animation__show-layer { diff --git a/src/scss/modules/pc/_calling.scss b/src/scss/modules/pc/_calling.scss index b934132..2bf2600 100644 --- a/src/scss/modules/pc/_calling.scss +++ b/src/scss/modules/pc/_calling.scss @@ -347,7 +347,7 @@ content: ""; display: block; width: 100%; height: 100%; background-color: $theme-mint; - transform: translateY(-100%); + transform: translateY(-101%); } } } @@ -476,10 +476,10 @@ /*** say ***/ .calling__say { - .line:nth-child(1) { animation: slide-right 0.35s ease 11s forwards; } - .line:nth-child(2) { animation: slide-right 0.35s ease 11.2s forwards; } - .line:nth-child(3) { animation: slide-right 0.35s ease 11.4s forwards; } - .line:nth-child(4) { animation: slide-right 0.35s ease 11.6s forwards; } + .line:nth-child(1) { animation: slide-right 1s ease 11s forwards; } + .line:nth-child(2) { animation: slide-right 1s ease 11.2s forwards; } + .line:nth-child(3) { animation: slide-right 1s ease 11.4s forwards; } + .line:nth-child(4) { animation: slide-right 1s ease 11.6s forwards; } .img { animation: calling__show-say 0.5s ease 11.9s forwards; } } diff --git a/src/scss/modules/pc/_gab-animation.scss b/src/scss/modules/pc/_gab-animation.scss index 37ba31a..db89c7f 100644 --- a/src/scss/modules/pc/_gab-animation.scss +++ b/src/scss/modules/pc/_gab-animation.scss @@ -289,9 +289,10 @@ &::after { content: ""; display: block; position: absolute; - top: 0; left: 0; + bottom: 0; left: 0; width: 100%; height: 100%; background-color: $theme-bg; + border-radius: 50%; } } .char-1 { background-image: url(../images/gab-animation/name/1.png); } @@ -696,7 +697,7 @@ div:nth-child(2):after { animation: slide-bottom 1s ease 9.2s forwards; } div:nth-child(3):after { animation: slide-bottom 1.8s ease 9.2s forwards; } div:nth-child(4):after { animation: slide-bottom 0.9s ease 9.2s forwards; } - .char:after { animation: slide-top 1.8s ease-out 9.2s reverse forwards; } + .char:after { animation: height0-100 1.8s ease-out 9.2s reverse forwards; } } .paint:nth-child(2) { animation: gab-animation__fall-paint-2 0.2s ease 10s forwards; @@ -704,7 +705,7 @@ div:nth-child(2):after { animation: slide-bottom 1s ease 10.2s forwards; } div:nth-child(3):after { animation: slide-bottom 1.8s ease 10.2s forwards; } div:nth-child(4):after { animation: slide-bottom 0.9s ease 10.2s forwards; } - .char:after { animation: slide-top 1.8s ease-out 10.2s reverse forwards; } + .char:after { animation: height0-100 1.8s ease-out 10.2s reverse forwards; } } .paint:nth-child(3) { animation: gab-animation__fall-paint-1 0.2s ease 8.5s forwards; @@ -712,7 +713,7 @@ div:nth-child(2):after { animation: slide-bottom 1s ease 8.7s forwards; } div:nth-child(3):after { animation: slide-bottom 1.8s ease 8.7s forwards; } div:nth-child(4):after { animation: slide-bottom 0.9s ease 8.7s forwards; } - .char:after { animation: slide-top 1.8s ease-out 8.7s reverse forwards; } + .char:after { animation: height0-100 1.8s ease-out 8.7s reverse forwards; } } .paint:nth-child(4) { animation: gab-animation__fall-paint-2 0.2s ease 10.5s forwards; @@ -720,7 +721,7 @@ div:nth-child(2):after { animation: slide-bottom 1s ease 10.7s forwards; } div:nth-child(3):after { animation: slide-bottom 1.8s ease 10.7s forwards; } div:nth-child(4):after { animation: slide-bottom 0.9s ease 10.7s forwards; } - .char:after { animation: slide-top 1.8s ease-out 10.7s reverse forwards; } + .char:after { animation: height0-100 1.8s ease-out 10.7s reverse forwards; } } .paint:nth-child(5) { animation: gab-animation__fall-paint-1 0.2s ease 9.5s forwards; @@ -728,7 +729,7 @@ div:nth-child(2):after { animation: slide-bottom 1s ease 9.7s forwards; } div:nth-child(3):after { animation: slide-bottom 1.8s ease 9.7s forwards; } div:nth-child(4):after { animation: slide-bottom 0.9s ease 9.7s forwards; } - .char:after { animation: slide-top 1.8s ease-out 9.7s reverse forwards; } + .char:after { animation: height0-100 1.8s ease-out 9.7s reverse forwards; } } .frame-top {