diff --git a/src/scss/keyframes/_common.scss b/src/scss/keyframes/_common.scss index 9bf63c9..b7d326c 100644 --- a/src/scss/keyframes/_common.scss +++ b/src/scss/keyframes/_common.scss @@ -34,6 +34,10 @@ from { transform: scale(0); } to { transform: scale(0.5); } } +@keyframes scale1-0dot5 { + from { transform: scale(1); } + to { transform: scale(0.5); } +} @keyframes scale10 { from { transform: scale(1); } to { transform: scale(10); } diff --git a/src/scss/keyframes/pc/_calling.scss b/src/scss/keyframes/pc/_calling.scss index be3dab2..2389dbd 100644 --- a/src/scss/keyframes/pc/_calling.scss +++ b/src/scss/keyframes/pc/_calling.scss @@ -6,6 +6,14 @@ from { transform: rotate(45deg) scale(2); opacity: 0; } to { transform: rotate(45deg) scale(1); opacity: 1; } } +@keyframes calling__touch-btn { + from { border-width: 40px; opacity: 0; transform: scale(0.6); } + to { border-width: 0px; opacity: 0.8; transform: scale(3); } +} +@keyframes calling__press-btn { + from { transform: scale(1) rotate(45deg); opacity: 1; } + to { transform: scale(0.6) rotate(45deg); opacity: 0.6; } +} @keyframes calling__icon-frame-1 { from { transform: scale(0) translate(-5px, 5px); opacity: 0; } @@ -15,3 +23,4 @@ from { transform: scale(0) translate(5px, -5px); opacity: 0; } to { transform: scale(1) translate(0); opacity: 1; } } + diff --git a/src/scss/modules/pc/_calling.scss b/src/scss/modules/pc/_calling.scss index 5690c0d..5b88d39 100644 --- a/src/scss/modules/pc/_calling.scss +++ b/src/scss/modules/pc/_calling.scss @@ -93,6 +93,16 @@ right: 0; .fa-phone { color: #6C9A7B; transform: rotate(45deg); } } + + .touch { + position: absolute; + top: 0; right: 0; + width: 80px; height: 80px; + border-radius: 50%; + border: solid 40px #fff; + box-sizing: border-box; + opacity: 0; + } } /*** icons ***/ @@ -205,6 +215,8 @@ /*** icons ***/ .calling__icons { + animation: fadeout 0.5s ease 6.6s forwards; + .icon-box .name { animation: fadeout 0.5s ease 6.6s forwards; } .icon-box:nth-child(1) { .icon { animation: @@ -263,6 +275,7 @@ /*** controls-btn ***/ .calling__controls-btn { + animation: fadeout 0.5s ease 6.6s forwards; .btn-1 { div:nth-child(1):after { animation: slide-left 0.6s ease 0.7s forwards; } div:nth-child(2):after { animation: slide-bottom 0.6s ease 0.7s forwards; } @@ -271,12 +284,14 @@ .fa-phone { animation: calling__show-btn-1 0.7s ease 1s forwards; } } .btn-2 { + animation: calling__press-btn 0.3s ease 5.9s alternate 2 forwards; div:nth-child(1):after { animation: slide-left 0.6s ease 0.9s forwards; } div:nth-child(2):after { animation: slide-bottom 0.6s ease 0.9s forwards; } div:nth-child(3):after { animation: slide-right 0.6s ease 0.9s forwards; } div:nth-child(4):after { animation: slide-top 0.6s ease 0.9s forwards; } .fa-phone { animation: calling__show-btn-2 0.7s ease 1.2s forwards; } } + .touch { animation: calling__touch-btn 0.6s ease 5.9s forwards; } } } }