diff --git a/_includes/styles/base/animations.css b/_includes/styles/base/animations.css index 8e02206..e8b189d 100644 --- a/_includes/styles/base/animations.css +++ b/_includes/styles/base/animations.css @@ -7,54 +7,17 @@ / ╰───────────────────────────────────────────────────────╯ / animations - reusable css animations */ -@keyframes rainbow { - 0% { - filter: hue-rotate(0deg) contrast(150%) saturate(150%); - } - - 100% { - filter: hue-rotate(360deg) contrast(150%) saturate(150%); - } -} - @keyframes bg-move { - 0% { - background-position:0 0 - } - to { - background-position:-960px -960px - } + 0% { background-position: 0 0; } + to { background-position: -960px -960px; } } -@keyframes opacity-blink { - 0% { opacity: 0% } - 5% { opacity: 100% } - 45% { opacity: 100% } - 50% { opacity: 0% } - 100% { opacity: 0% } -} - -@keyframes opacity-blink-reverse { - 0% { opacity: 100% } - 5% { opacity: 0% } - 45% { opacity: 0% } - 50% { opacity: 100% } - 100% { opacity: 100% } -} - -@keyframes outline-blink { +@keyframes outline-flash { 0% { outline-width: 0rem; } - 50% { outline-width: .45rem; } - 100% { outline-width: 0rem; } + to { outline-width: .5rem; outline-color: transparent; } } @keyframes ticker { - 0% { - transform: translate3d(0, 0, 0); - visibility: visible; - } - - 100% { - transform: translate3d(-100%, 0, 0); - } + 0% { transform: translate3d(0, 0, 0); } + to { transform: translate3d(-100%, 0, 0); } } \ No newline at end of file diff --git a/_includes/styles/base/navbar.css b/_includes/styles/base/navbar.css index 7ea7aa3..ad86ffd 100644 --- a/_includes/styles/base/navbar.css +++ b/_includes/styles/base/navbar.css @@ -26,14 +26,14 @@ &::after { background: var(--accent); border-radius: 100%; - bottom: -.2rem; + bottom: -.25rem; content: ""; height: 1rem; - outline: .13rem solid color-mix(in srgb,var(--accent)60%,transparent); + outline: solid var(--accent); position: absolute; right: -.3rem; width: 1rem; - animation: outline-blink ease-in-out 1s infinite; + animation: outline-flash ease-out 1s infinite; } }