diff --git a/src/scss/keyframes/pc/_calling.scss b/src/scss/keyframes/pc/_calling.scss index 48ef20e..2d4a04e 100644 --- a/src/scss/keyframes/pc/_calling.scss +++ b/src/scss/keyframes/pc/_calling.scss @@ -51,3 +51,8 @@ 85% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } + +@keyframes calling__end { + from { transform: translateY(-100%); } + to { transform: translateY(0%); } +} diff --git a/src/scss/modules/pc/_calling.scss b/src/scss/modules/pc/_calling.scss index 220a4e7..3770571 100644 --- a/src/scss/modules/pc/_calling.scss +++ b/src/scss/modules/pc/_calling.scss @@ -333,6 +333,25 @@ } } + /*** end ***/ + .calling__end { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + z-index: 6; + + div { + width: 100%; height: 10%; + overflow: hidden; + &::after { + content: ""; display: block; + width: 100%; height: 100%; + background-color: $theme-mint; + transform: translateY(-100%); + } + } + } + .calling[data-state="start"] { /*** bg ***/ .calling__bg { @@ -512,5 +531,19 @@ } } } + + /*** end ***/ + .calling__end { + div:nth-child(1):after { animation: slide-bottom 0.3s ease 12.6s forwards; } + div:nth-child(2):after { animation: slide-bottom 0.3s ease 12.65s forwards; } + div:nth-child(3):after { animation: slide-bottom 0.3s ease 12.75s forwards; } + div:nth-child(4):after { animation: slide-bottom 0.3s ease 12.8s forwards; } + div:nth-child(5):after { animation: slide-bottom 0.3s ease 12.85s forwards; } + div:nth-child(6):after { animation: slide-bottom 0.3s ease 12.9s forwards; } + div:nth-child(7):after { animation: slide-bottom 0.3s ease 12.95s forwards; } + div:nth-child(8):after { animation: slide-bottom 0.3s ease 13.0s forwards; } + div:nth-child(9):after { animation: slide-bottom 0.3s ease 13.05s forwards; } + div:nth-child(10):after { animation: calling__end 0.3s ease 13.1s forwards; } + } } }