diff --git a/src/scss/keyframes/pc/_gab-animation.scss b/src/scss/keyframes/pc/_gab-animation.scss index 236db49..0769c64 100644 --- a/src/scss/keyframes/pc/_gab-animation.scss +++ b/src/scss/keyframes/pc/_gab-animation.scss @@ -135,3 +135,25 @@ 60% { transform: scaleX(1); } 100% { top: calc(50% - 30px); transform: scaleX(1.2); } } + +@keyframes gab-animation__show-clock-frame { + from { transform: scale(0); } + to { transform: scale(1); } +} +@keyframes gab-animation__show-clock-hand { + from { height: 0; top: 50%; } + to { height: 100%; top: 0%; } +} + +@keyframes gab-animation__reverse-clock-hand { + from { transform: rotate(0deg); } + to { transform: rotate(-30deg); } +} +@keyframes gab-animation__rotate-clock-hand { + from { transform: rotate(-30deg); } + to { transform: rotate(360deg); } +} +@keyframes gab-animation__scale-clock-hand { + from { width: 10px; left: calc(50% - 5px); } + to { width: 100%; left: 0; } +} diff --git a/src/scss/modules/pc/_gab-animation.scss b/src/scss/modules/pc/_gab-animation.scss index d0d1aa6..274d1d3 100644 --- a/src/scss/modules/pc/_gab-animation.scss +++ b/src/scss/modules/pc/_gab-animation.scss @@ -305,6 +305,70 @@ .paint:nth-child(3) { left: calc(50% - 50px); } .paint:nth-child(4) { left: calc(50% + 90px); } .paint:nth-child(5) { left: calc(50% + 230px); } + + .frame { + position: absolute; left: 0; + width: 100%; height: calc((100% - 300px) / 2); + overflow: hidden; + + div { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + } + div:nth-child(1) { background-color: $theme-gray; } + div:nth-child(2) { background-color: $theme-bg; } + div:nth-child(3) { background-color: $theme-light-pink; } + div:nth-child(4) { background-color: $theme-pink; } + div:nth-child(5) { background-color: $theme-mint; } + } + .frame-top { + top: 0; + div { transform: translateY(100%); } + } + .frame-bottom { + bottom: 0; + div { transform: translateY(-100%); } + } + + .clock { + position: absolute; + top: calc((100% - 300px) / 2); left: 0; + width: 100%; height: 300px; + + &::before, + &::after { + content: ""; display: block; + position: absolute; + transform: scale(0); + } + &::before { + top: calc(50% - 100px); + left: calc(50% - 100px); + width: 200px; height: 200px; + border-radius: 50%; + box-sizing: border-box; + border: dashed 5px $theme-mint; + } + &::after { + top: calc(50% - 125px); + left: calc(50% - 125px); + width: 250px; height: 250px; + border-radius: 50%; + box-sizing: border-box; + border: solid 10px $theme-mint; + border-top-color: transparent; + border-bottom-color: transparent; + } + + div { + position: absolute; + left: calc(50% - 5px); top: 50%; + width: 10px; height: 0; + background-color: $theme-mint; + z-index: 1; + } + } } /************************************************************************************************* @@ -509,6 +573,41 @@ 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; } } + + .frame-top { + div:nth-child(1) { animation: slide-top 0.4s ease 12.5s forwards; } + div:nth-child(2) { animation: slide-top 0.4s ease 12.6s forwards; } + div:nth-child(3) { animation: slide-top 0.4s ease 12.7s forwards; } + div:nth-child(4) { animation: slide-top 0.4s ease 12.8s forwards; } + div:nth-child(5) { animation: slide-top 0.4s ease 12.9s forwards; } + } + .frame-bottom { + div:nth-child(1) { animation: slide-bottom 0.4s ease 12.5s forwards; } + div:nth-child(2) { animation: slide-bottom 0.4s ease 12.6s forwards; } + div:nth-child(3) { animation: slide-bottom 0.4s ease 12.7s forwards; } + div:nth-child(4) { animation: slide-bottom 0.4s ease 12.8s forwards; } + div:nth-child(5) { animation: slide-bottom 0.4s ease 12.9s forwards; } + } + + .clock { + &::before { + animation: + gab-animation__show-clock-frame 0.5s ease 13.3s forwards, + rotate360 4s linear 13.8s infinite; + } + &::after { + animation: + gab-animation__show-clock-frame 0.5s ease 13.4s forwards, + rotate360 3s linear 13.9s infinite; + } + div { + animation: + gab-animation__show-clock-hand 0.3s ease 14s forwards, + gab-animation__reverse-clock-hand 0.4s ease 14.3s forwards, + gab-animation__rotate-clock-hand 0.3s ease-out 14.7s forwards, + gab-animation__scale-clock-hand 0.4s ease 14.8s forwards; + } + } } } }