diff --git a/gorge.css b/gorge.css index 112c1df..4bba2ca 100644 --- a/gorge.css +++ b/gorge.css @@ -582,24 +582,33 @@ div::-webkit-scrollbar-corner { top: 15vh; left: 50vw; transform-origin: 0% 0%; - animation: news-text-frames 7s cubic-bezier(0.68, -0.55, 0.265, 1.55); + animation: news-text-enter 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); animation-fill-mode: both; max-width: 40vw; font-size: 16pt; } -@keyframes news-text-frames { +.news-text.news-text-leaving { + pointer-events: none; + animation: news-text-exit 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); + animation-fill-mode: both; +} + +@keyframes news-text-enter { 0% { transform: translate(-50%, -50px); opacity: 0; } - 20% { + 100% { transform: translate(-50%, 0px); opacity: 1; } - 80% { - transform: translate(-50%, -0px); - opacity: 1; +} + +@keyframes news-text-exit { + 0% { + transform: translate(-50%, 0px); + opacity: 1 } 100% { transform: translate(-50%, 50px); diff --git a/gorge.js b/gorge.js index a16d8bd..01a943e 100644 --- a/gorge.js +++ b/gorge.js @@ -1112,20 +1112,26 @@ function showNews(text) { div.innerHTML = text; div.classList.add("news-text"); + const body = document.querySelector("body"); div.addEventListener("click", () => { clearTimeout(newsShowTimer); clearTimeout(newsRemoveTimer); - body.removeChild(div); + div.classList.add("news-text-leaving"); + setTimeout(() => { + body.removeChild(div); + }, 1000); doNews(); }); - const body = document.querySelector("body"); body.appendChild(div); newsRemoveTimer = setTimeout(() => { - body.removeChild(div); + div.classList.add("news-text-leaving"); + setTimeout(() => { + body.removeChild(div); + }, 1000); }, 8000); }