diff --git a/src/scss/keyframes/pc/_load-view.scss b/src/scss/keyframes/pc/_load-view.scss index 0545471..15c8ecb 100644 --- a/src/scss/keyframes/pc/_load-view.scss +++ b/src/scss/keyframes/pc/_load-view.scss @@ -100,8 +100,9 @@ } @keyframes load-view__show-message { - from { transform: translateX(-100px); opacity: 0; } - to { transform: translateX(0px); opacity: 1; } + 0% { transform: translateX(-200px); opacity: 0; } + 8% { transform: translateX(-80px); opacity: 1; } + 100% { transform: translateX(0px); opacity: 1; } } @keyframes load-view__close-1 { diff --git a/src/scss/modules/pc/_load-view.scss b/src/scss/modules/pc/_load-view.scss index a398d89..dde16df 100644 --- a/src/scss/modules/pc/_load-view.scss +++ b/src/scss/modules/pc/_load-view.scss @@ -488,10 +488,10 @@ animation: load-view__show-curtain-2 0.5s ease 6s forwards; &::after { animation: load-view__show-curtain-inner-2 1.5s ease 6.2s forwards; } } - .message { animation: load-view__show-message 0.5s ease 6.7s forwards; } + .message { animation: load-view__show-message 5s ease-out 6.7s forwards; } - &::before { animation: load-view__close-1 0.5s ease 7.2s forwards; } - &::after { animation: load-view__close-2 0.5s ease 7.2s forwards; } + &::before { animation: load-view__close-1 0.6s ease 7.2s forwards; } + &::after { animation: load-view__close-2 0.6s ease 7.2s forwards; } } /*** info ***/